Фиксированное соотношение сторон. К тому же, при верстке под мобильные устройства, под которые необходимо иметь урезанную версию картинки. В этом руководстве мы в деталях изучим технологию создания респонсивного фонового изображения, которое будет занимать всю область просмотра в браузере при любом разрешении. Адаптивное изображение - это изображение, которое при изменении размера экрана подстраивается под него, пропорционально уменьшаясь, либо увеличиваясь.
Изображения должны сжиматься и растягиваться соответственно. Он не адаптировался к мобильному устройству, а просто уменьшились размеры шрифта, картинок.
Адаптивная верстка изображений под современные девайсы, которые имеют так называемые ретина-мониторы с повышенной плотностью пикселей. Зачем обязательно надо делать картинки адаптивными. Это необходимость возникла с массовым появлением компактных мониторов с повышенной плотностью пикселей. Одна из основных задач при адаптивной верстке это масштабирование изображений в том числе фоновых таким образом, чтобы они корректно отображались на устройствах с разными разрешениями экранов.
Примеры использования адаптивных фоновых изображений. Иногда мы хотим видеть изображения выстроенные в ряд бок о бок, или например, в виде сетки, для организации простейшей галереи картинок. Адаптивные изображения будут автоматически корректироваться в соответствии с размером экрана.
Одиночное адаптивное изображения. Адаптивную верстку начинают с создания контейнера для упаковки картинки.
Речь идет об изображениях и видео. Что произойдёт, если размеры картинки будут больше размера экрана.
Теперь, мы должны все время думать и о маленьких экранах. Часто у разработчиков возникает следующая проблема. Адаптивное изображение часто крайне необходимо для качественных проектов, но вот его реализация бывает затруднительна. К фоновым же изображением такой способ применить нельзя.