dvguinf
@dvguinf
Веб-разработчик

Как сверстать картинку на картинке (адаптив)?

Вот код:
<div style="width:100%; height: 100%; position: relative;">	
				<img src="/wp-content/uploads/2015/04/ban.jpg" alt="фон в шапке" style="width:100%" />
				<div style="position:absolute; right:500px; top:250px; height:70px;">
					<a href="#"><img src="/wp-content/uploads/2015/04/iconka.gif"  style="height:80px"/></a>
				</div>
</div>


Суть такая, в шапке есть картинка ban.jpg, на фоне этой картинки нужно сделать iconka.gif, да так, чтобы при изменении разрешения iconka.gif не уползала ни вверх ни в низ, и была пропорционально посредине внизу на фоне картинки ban.jpg. Как такое реализовать? На данный момент при изменениии разрешения картинка iconka.gif уплывает вниз.
  • Вопрос задан
  • 282 просмотра
Пригласить эксперта
Ответы на вопрос 3
@westdp
Первая картинка бекграундом, вторая можешь сделать как написал Pavel Torbeev , но есть более универсальный подход, где не нужно знать размеры картинки:
.center {
    position:absolute;
    top:50%;
    left:50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); 
}
Ответ написан
Комментировать
hronik87
@hronik87
Обитаю в 1С-Bitrix
Первую картинка бэкграундом, вторую без абсолютного позиционирования. margin: 0 auto; Ну можно еще Inline-block сделать.
Ответ написан
Комментировать
Универсальное решение для выравнивания по середине для объектов с абсолютным позиционированием (если известны размеры, например, 80х80):
.center {
    position:absolute;
    top:50%;
    left:50%;
    margin-left: -40px; //смещаем на половину ширины
    margin-top:-40px; //смещаем на половину высоты
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы