Позиционирование четырех изображений в одном и том же месте, в центре экрана, в загрузочном контейнере .container

Question

Я хотел бы иметь четыре изображения в том же положении на экране, в центре и в загрузочном блоке .container, так что если изображения для больших они изменяются.

Цель состоит в том, чтобы сделать первую страницу веб-сайта, содержащую полный логотип, черно-белый.

Я использую карту/область, чтобы на событиях ввода мыши я мог отображать изображение за логотипом, создавая тень (которую я не могу делать через css, поскольку она имеет определенную форму) под логотипом в конкретном регионе.

Моих четыре изображений являются следующим:

• полного логотип
• тени на левую верхний углу
• тени на правом верхние
• тени на нижний

Все они имеют точные тот же размер. Я думал, что использовать только .pagination-centered на всех из них будет достаточно, но он не работает.

Я пробовал следующий CSS для всех изображений (все погруженных в отдельных делах)

position:absolute; 
left:50%; 
top:50%; 
margin-left:-157px; 
margin-right:-157px; 
/* half of img real size */ 

это работает хорошо, но не на мобильном телефоне, где изображения не измененных размере правильно и в нижней строке появляется в середине экрана, потому что я думаю, что высота изображения не учитывается при его позиционировании.

Answer 1

Ничего, я нашел его и чувствую себя тупой на самом деле:

Я просто использовать несколько классов CSS с фоном применяется к самому изображению.

В ответном дизайне он не работает очень хорошо, потому что фон не изменен, но я уверен, что смогу найти обходное решение. Если нет, я буду использовать два набора изображений. И так как обратный вызов находится на событии mouseenter, на самом деле это не имеет значения на мобильном телефоне!

Надеюсь, что это поможет кому-то