object-fit
Как картинка `<img>` или `<video>` вписывается в размеры элемента.
Синтаксис
object-fit: cover;Значения
| Параметр | Тип | Описание |
|---|---|---|
| fill | keyword | Растягивается по размеру, пропорции теряются (по умолчанию). |
| cover | keyword | Заполняет всю область с сохранением пропорций; края обрезаются. |
| contain | keyword | Помещается целиком с сохранением пропорций; могут остаться пустые места. |
| none | keyword | Естественный размер, обрезанный по области. |
Примеры
Широкое фото в квадратной области:
<style>
img { width: 120px; height: 120px; border: 1px solid gray; background: whitesmoke; }
</style>
<img src="/media/photo-400x250.jpg" alt="" style="object-fit: fill;">
<img src="/media/photo-400x250.jpg" alt="" style="object-fit: cover;">
<img src="/media/photo-400x250.jpg" alt="" style="object-fit: contain;">Примечания
object-fit имеет смысл, только когда у элемента заданы и ширина, и высота. Какая часть картинки останется видна, решает object-position.
См. также
- object-position — Какая часть обрезанной `<img>` или `<video>` остаётся видна.
- aspect-ratio — Соотношение ширины и высоты: недостающий размер браузер вычисляет сам.
- background-size — Размер фоновой картинки.
- <img> — Картинка.
Вопросы и ответы по теме
В учебнике
- Адаптивные изображения — Как картинки подстраиваются под экран — max-width, aspect-ratio, object-fit, атрибуты srcset и sizes, элемент picture.