Пропорциональное заполнение контейнера картинкой

Речь идет о том, чтобы показать изображение внутри контейнера так, чтобы оно заполнило собой весь контейнер, но при этом не изменились пропорции картинки.

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

Способ № 1 — использование background-size

Если есть возможность вместо вывода картинки, url изображения подставить на задний фон контейнера, то используйте следующие стили:

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

Способ №2 — использование CSS свойства object-fit

Этот способ позволяет нам тот же фокус провернуть непосредственно с контейнером, к примеру <img>. Поддержка браузерами похуже, но использовать удобнее, если речь идет о изменении поведения в контейнерах <img><video><object><input type=’image’>.

Пример использования:

Какой бы URL вы не вставили в картинку — она заполнит собой весь контейнер изображения.

Способ № 3 — использование CSS свойства overflow.

Этот способ более сложный, но в ряде случаев может оказаться незаменимым. Он не использует новых CSS свойств, но требует обернуть IMG в какой то контейнер.

Размеры изображения будут зависеть от размеров контейнера. Всё «лишнее» будет скрыто с помощью overflow: hidden.

Написать комментарий

Мало букафф? Читайте есчо !

Меняем отступы сетки (gutter-width) в Bootstrap

Октябрь 2, 2017 г.

Дефолтова сетка в bootstrap 3 имеет размер 30 пикс. Понятно, что рабочий макет может содержать произвольные отступы и, если вы хотите использовать преимущества работы с grid от бутстрапа, придется как то их менять и фиксить. Фактически нужно сделать ...

Читать

Размещаем блок по центру, используя CSS

Март 29, 2016 г.

Для центровки блока средствами CSS  оперируют его внешними отступами. К примеру, такой CSS код будет центрировать контейнер DIV внутри родительского. [crayon-5ed2fa0d616a3466238043/] Ключевым является значение auto для левого и правого отступов. ...

Читать

 

Комментарии к «Пропорциональное заполнение контейнера картинкой»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: