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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

box-sizing: padding-box на Chrome

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

Пока Хром не поддерживает данное значение атрибута спецификации CSS, что то надо делать! Можно отказаться, но удобно ведь? Самый простой выход написать вместо злополучного экспериментального padding-box: [crayon-5d2f03755f56b470730525/] Во ...

Читать

Меняем оформление input checkbox с помощью CSS

Декабрь 27, 2017 г.

Оформление элементов формы - это старая проблема. Ситуация несомненно улучшается, но финала пока не видно. С появлением псевдо-контейнеров :after и :before ...

Читать

 

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

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



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