Свойство object-fit
Свойството object-fit задава
съотношение на страните или мащабиране
на елементи като изображение
или видео.
Синтаксис
селектор {
object-fit: fill или contain или cover или none;
}
В таблицата са представени основните стойности за
свойството object-fit:
Стойности
| Стойност | Описание |
|---|---|
fill |
Мащабиране на елемента за съответствие с зададените размери, като пропорциите на елемента се игнорират. |
contain |
Мащабиране на елемента за съответствие с зададените размери, като пропорциите на елемента се запазват. |
cover |
Размерите на елемента се променят, за да запълнят изцяло посочената област, като пропорциите на самия елемент се запазват. |
none |
Оригиналните размери на елемента се запазват. |
Пример
Нека зададем на нашето изображение запълване на указания размер без запазване на пропорциите:
<div>
<img src="bg.png">
</div>
img {
object-fit: fill;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Пример
А сега нека направим така, че изображението да запълни указания контейнер със запазване на пропорциите:
<div>
<img src="bg.png">
</div>
img {
object-fit: contain;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Пример
Нека запълним с нашето изображение указания контейнер така, че размерът на самото изображение да се промени, но при това да бъдат запазени неговите пропорции:
<div>
<img src="bg.png">
</div>
img {
object-fit: cover;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Пример
Нека просто поставим нашето изображение в указания контейнер със запазване на неговите оригинални размери:
<div>
<img src="bg.png">
</div>
img {
object-fit: none;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Вижте също
-
свойството
aspect-ratio,
което определя съотношението на страните на елемента