Својство 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;
}

Результат: