Заполнение объектом
Классы object-* задают свойство object-fit для заменяемых элементов —
<img>, <video> и подобных. Берите их, когда у изображения фиксированные
ширина и высота, а пропорции файла с ними не совпадают.
Пример
Способы вписывания
Одно и то же изображение 4:3 стоит в одинаковых широких областях; меняется только класс. Пунктирная рамка — граница элемента.
Ширина экрана
С префиксом ширины класс действует от указанной ширины и шире. Меняйте
ширину окна просмотра: начиная с ширины md изображение перестаёт
вписываться целиком и заполняет область с обрезкой.
Классы
| Класс | CSS | Значения |
|---|---|---|
object-contain |
object-fit: contain |
— |
object-cover |
object-fit: cover |
— |
object-fill |
object-fit: fill |
— |
object-none |
object-fit: none |
— |
object-scale-down |
object-fit: scale-down |
— |
Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:object-contain.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Как выбрать
object-cover— обложки, превью и аватары: область заполнена без искажений, лишнее обрезается.object-contain— логотипы, схемы и товары, которые нельзя обрезать: изображение видно целиком, по краям остаются поля.object-fillрастягивает изображение под область и искажает пропорции.object-noneпоказывает изображение в исходном размере; видимую часть выбирают классами позиционирования объекта.object-scale-downуменьшает изображение, какobject-contain, но не увеличивает маленькое сверх исходного размера.
Класс действует, только когда у элемента заданы и ширина, и высота:
<img class="w-full h-e6 object-cover" src="cover.jpg" alt="Обложка статьи">
<img class="w-e6 h-e6 object-contain" src="logo.svg" alt="Логотип">
Вместе с позицией
По умолчанию изображение стоит по центру области. Чтобы при обрезке сохранить нужную часть, добавьте класс позиции:
<img class="w-full h-e6 object-cover object-top" src="portrait.jpg" alt="Портрет">
Ограничения
- Классы действуют на заменяемые элементы (
<img>,<video>,<object>и подобные), а не на фоновые изображения и обычные блоки. - У семейства нет префиксов состояния.