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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подчеркиваем текст или бек-граунд для текста

Апрель 4, 2023 г.

VS Задача: eсть текст, хочется не просто подчеркнуть (text-decoration: underline), а сделать это красиво. Вместо зеленой полоски, смотрящейся ...

Читать

Анимация ожидания загрузки/обновления, используя CSS3

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

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...

Читать

 

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

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



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

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