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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выравнивание блока HTML (вертикально и горизонтально)

Сентябрь 17, 2015 г.

Центровка элемента - одна из типовых задач в верстке. Решать её можно по разному, рассмотрим некоторые способы. Горизонтальная центровка. С центровкой ...

Читать

Позиционирование фона с помощью background-position

Май 3, 2018 г.

В CSS, для позиционирования фонового изображения в контейнере, мы используем свойство background-position. Свойство можно задать отдельно для оси X и Y,  кроме того можно задать 2, 3 или 4 параметра. Классический случай - позиционирование с ...

Читать

 

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

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



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