Свойство object-fit: изображение в рамке
Как вписать картинку в заданный прямоугольник без искажения пропорций.
Как это работает
object-fit определяет, как содержимое заменяемого элемента, например img, помещается в его собственный бокс. Сначала нужно задать размер этого бокса. Свойство не меняет фоновые картинки и не задаёт размеры контейнера за вас.
cover заполняет всю область с возможной обрезкой, contain сохраняет всё изображение с возможными пустыми полями. Важный объект при обрезке можно сдвинуть через object-position. Для товарных фотографий и портретов выбор режима часто различается.
Пример в интерфейсе
img { width: 220px; height: 120px; object-fit: cover; border: 2px solid #11694e; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| cover | Заполнить область, обрезав лишнее. |
| contain | Показать всё содержимое без обрезки. |
| fill | Растянуть до размера бокса, возможно искажая пропорции. |
| object-position | Положение содержимого внутри бокса. |
На что обратить внимание
Не обрезайте значимую часть изображения автоматически. На разных пропорциях карточки лицо, подпись или предмет могут выйти за кадр.
Проверьте на практике
Переключите cover на contain в примере. На встроенном широком образце заметно, как меняются поля и видимая часть изображения.
Связанные темы: aspect-ratio, width.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.