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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вставка переменной в инлайновое изображение в LESS

Август 29, 2019 г.

Небольшие векторные элементы очень удобно вставлять как часть CSS кода. Хочу показать пример, как сделать их еще и параметрически зависимыми, при компиляции из LESS. К примеру, при ребрендинге или использовании кусочка стилей на другом сайте, вы ...

Читать

Делаем эффект параллакса для заднего фона на сайте

Октябрь 19, 2015 г.

Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса. Этот кусочек скрипта привязывает нас к событию onscroll окна. ...

Читать

 

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

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



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

Один комментарий в “Пропорциональное заполнение контейнера картинкой”