Свойство object-fit

Свойството object-fit задава съотношение на страните или мащабиране на елементи като изображение или видео.

Синтаксис

cssселектор {
  object-fit: fill или contain или cover или none;
}

В таблицата са представени основните стойности за свойството object-fit:

Стойности

Стойност	Описание
`fill`	Мащабиране на елемента за съответствие с зададените размери, като пропорциите на елемента се игнорират.
`contain`	Мащабиране на елемента за съответствие с зададените размери, като пропорциите на елемента се запазват.
`cover`	Размерите на елемента се променят, за да запълнят изцяло посочената област, като пропорциите на самия елемент се запазват.
`none`	Оригиналните размери на елемента се запазват.

Пример

Нека зададем на нашето изображение запълване на указания размер без запазване на пропорциите:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: fill;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Пример

А сега нека направим така, че изображението да запълни указания контейнер със запазване на пропорциите:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: contain;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Пример

Нека запълним с нашето изображение указания контейнер така, че размерът на самото изображение да се промени, но при това да бъдат запазени неговите пропорции:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: cover;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Пример

Нека просто поставим нашето изображение в указания контейнер със запазване на неговите оригинални размери:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: none;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Вижте също

свойството aspect-ratio,
което определя съотношението на страните на елемента