Адаптивное изображение в HTML как background-size: cover

Быстрый ответ

Свойство CSS object-fit идеально подходит тем, кто хочет достигнуть эффектов похожих на background-size: cover и contain, но уже для элементов <img>. Установка object-fit: cover; позволяет изображению заполнять контейнер без изменения пропорций, тогда как object-fit: contain; полностью вписывает изображение в контейнер. Вот как это выглядит на практике:

// Элегантное решение для изображений
img {
  object-fit: cover; /* словно говоря: "Cover — это новый черный" */
}

При добавление этого свойства тегу <img>, оно эквивалентно следующему:

<!-- Обратите внимание: изображение полностью покрывает контейнер -->
<img src="path-to-image.jpg" style="object-fit: cover;" alt="Pixar не смог бы сделать это лучше">

Таким образом, изображение будет увеличиваться или уменьшаться, обеспечивая эффект фонового изображения для объектов в переднем плане.

Тонкости работы с изображениями

Работа с различными браузерами: знакомство с object-fit

Прежде чем использовать object-fit, проверьте его совместимость с браузерами, которыми пользуются ваши пользователи. Он поддерживается большинством современных браузеров, но есть исключения. Для обеспечения поддержки старых версий используйте контейнер div с фоновым изображением и соответствующим свойством background-size:

.div-container {
  background: url('path-to-image.jpg') no-repeat center center;
  background-size: cover; /* Надежное решение для поклонников IE */
}

Подробнее об этом расскажет наш спикер на видео

Создание поглощающего внимание полноэкранного эффекта с помощью object-fit

Для создания гипнотизирующего полноэкранного видео object-fit: cover — незаменимый инструмент. Он позволяет подстраивать изображение под размеры окна просмотра, избегая искажений. Когда вы используете его с единицами относительно видового поля (vh и vw), результат оказывается динамичным и адаптивным:

/* Волшебство в мире CSS */
.fullscreen-img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

Дружим с устаревшими браузерами

Если вам необходимо обеспечить работу с устаревшими браузерами, например с IE8, используйте абсолютное позиционирование, свойство overflow: hidden и большие отрицательные поля для центрирования изображения, что создаст эффект схожий с background-size: cover.

Визуализация

Представьте концепцию адаптивного изображения с таким же удобством, с каким вы задействуете свойства background-size для блоков CSS в <img>:

Позволим нашему изображению быть реактивным как вода. Пшшш! 🌊

🖼 = фиксированный размер (элемент img с max-width/height) 🌊 = адаптивное содержимое (изображение, которое реагирует на изменение)

Для cover вода стремится заполнить рамку, вылезая за ее пределы:

🖼 [======🌊🌊🌊======]  // Больше динамики, чем на пляжной вечеринке

Для contain вода содержится в рамке:

🖼 [   🌊🌊🌊   ]        // Всё помещается внутри контура, ни капли за край

Тег <img>, с применением некоторых CSS-хитростей, тоже способен на это:

img {
  object-fit: cover; /* или contain, в зависимости от потребности */
}

Как и вода приспосабливается к форме сосуда, так и изображения реагируют на изменения размера контейнера с уникальной грацией.

Динамичная адаптивность: дополнительная настройка с использованием JavaScript

JavaScript способен динамически изменять стили изображений разных размеров и ориентаций, гарантируя их идеальную подгонку под размеры устройства пользователя:

img {
  transform: scale(1.1); /* Увеличиваем изображения, чтобы избежать скроллинга */
}

Подробное объяснение с примерами можно найти на JSFiddle по ссылке http://jsfiddle.net/BuschFunker/sjt71j99/.

Гибкость в подгонке изображений под индивидуальные требования

Хотите сохранить первоначальные размеры изображений, одновременно идеально вписывая их в контейнер? Сочетание transform: scale() с max-width/max-height обеспечит точную подгонку каждого изображения, сохраняя их первоначальные пропорции.

Полезные материалы

1. object-fit | CSS-Tricks — Полная информация о свойстве object-fit, которая сделает вас профессионалом в его использовании.
2. object-fit – CSS | MDN — Глубокое погружение в работу свойства object-fit.
3. Considerations for Creating a Card Component | CSS-Tricks — Советы по созданию реактивных интерфейсных компонентов, например, карточек, с использованием object-fit.
4. Responsive Images Done Right: A Guide To picture and srcset — Smashing Magazine — Обстоятельное руководство по созданию адаптивных изображений.
5. The picture element | web.dev — Как адаптировать <picture> элементы, чтобы они вели себя подобно object-fit.
6. Creating Intrinsic Ratios for Video – A List Apart — Применение принципов object-fit при работе с видео.