De eigenschap object-fit

De eigenschap object-fit bepaalt de beeldverhouding of schaling van elementen zoals een afbeelding of video.

Syntaxis

cssselector {
  object-fit: fill of contain of cover of none;
}

In de tabel staan de belangrijkste waarden voor de eigenschap object-fit:

Waarden

Voorbeeld

Laten we onze afbeelding de opgegeven afmeting laten vullen zonder de verhoudingen te behouden:

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

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

Результат:

Voorbeeld

Laten we nu de afbeelding het opgegeven container volledig laten vullen met behoud van de verhoudingen:

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

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

Результат:

Voorbeeld

Laten we onze afbeelding het opgegeven container laten vullen, zodat de grootte van de afbeelding zelf verandert, maar de verhoudingen ervan behouden blijven:

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

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

Результат:

Voorbeeld

Laten we onze afbeelding eenvoudig in de opgegeven container plaatsen met behoud van de oorspronkelijke afmetingen:

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

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

Результат:

Zie ook