Идея заключается в фокус в рамках DIV, изображение с абсолютное позиционирование { позиция: абсолютное; }. Для этого, Прежде всего назначить, для div, который будет содержать изображение, позиционирование Относительная, Таким образом предотвращая абсолютного позиционирования изображения предназначен для родительского контейнера элемента, который имеет относительное позиционирование Следующая, или не, для тело.
Предполагая, что у нас есть следующий код с div и изображения в том же:
1 2 3 | <div class="contenedor"> <img class="imagen" src="" /> </div> |
Стиль, применяемый к контейнеру и изображение выглядит следующим образом:
1 2 3 4 5 6 7 8 9 10 11 | .contenedor { position: relative; } .imagen { position:absolute; left:0px; right:0px; top:0px; margin:auto; } |
Чтобы увидеть результат с некоторыми Пример, Мы собираемся изменить HTML-код путем присвоения край и Размер в div, а также добавить маршрут и Размер к изображению. Он будет выглядеть примерно так:
1 2 3 4 5 | <div class="contenedor" style="border:1px solid orange;width:100%;max-width:500px;height:400px;"> <img class="imagen" src="https://professor-falken.com/wp-content/uploads/2016/04/10-fondos-de-pantalla-para-que-uses-en-WhatsApp-Telegram-o-tu-aplicacion-de-mensajeria-favorita-Image-5-professor-falken.com_.jpg" style="width:200px;" /> </div> |
и, затем, результат:
