В этом небольшом уроке, мы рассмотрим простейшие способы создания адаптивных изображений с помощью CSS. Существует не мало различных решений сделать изображения адаптивными, все они различаются и по сложности, и степени поддержки браузерами. Примером сложного пути реализации адаптивных картинок, является использование атрибута srcset
, для которого требуется несколько изображений, больше разметки, а также зависимость от поддержки браузерами.
Современные спецификации позволяют нам сделать изображения, используемые на страницах сайтов, гибкими и корректно отображающимися на экранах различных пользовательских устройств, для этого достаточно использовать всего лишь несколько свойств из обоймы CSS.
<img { width: 100%; height: auto; }>
Начнём с рассмотрения базового примера, когда нам необходимо сделать одиночные картинки используемые в записях, или других отдельных блоках, полностью адаптивными. Например, у нас есть контейнер, которому мы задали базовую ширину width: 96%;
и выставили максимальную ширину в max-width: 960px;
, в этом блоке нам необходимо вывести адаптивное изображение. Для этого элементу <img >
внутри контейнера определяем ширину в 100%, так, что его ширина всегда будет равна ширине контейнера, независимо от размера области просмотра. Высоту, соответственно, переводим в автоматический режим, в итоге изображение будет изменяться пропорционально.
<div class="container"> <img src="image01.jpg" width="960" height="640" /> </div>
div.container { width: 96%; max-width: 960px; margin: 0 auto; /* центрируем основной контейнер */ } img { width: 100%; /* ширина картинки */ height: auto; /* высота картинки */ }
Обратите внимание, что <img>
элемент будет адаптивным, даже если были заданы фиксированные значения HTML-атрибутов ширины и высоты непосредственно в разметке.