IN DEZE HANDLEIDING:
Afbeelding schalen passend maken in kader CSS met CSS
De object-fit eigenschap bepaalt hoe een element reageert op de hoogte en breedte van zijn content box. Het is bedoeld voor afbeeldingen, video’s en andere embeddable mediaformaten in combinatie met de object-position eigenschap.
Op zichzelf gebruikt, laat object-fit ons een inline afbeelding bijsnijden door ons fijnkorrelige controle te geven over hoe het plet en uitrekt binnen zijn kader.
5 waarden object-fit
object-fit kan worden ingesteld met een van deze 5 waarden:
- fill:
dit is de standaardwaarde die de afbeelding uitrekt om in de inhoudsbox te passen, ongeacht de hoogte-breedteverhouding. - contain:
vergroot of verkleint de grootte van de afbeelding om het vak te vullen met behoud van de beeldverhouding. - cover:
de afbeelding zal de hoogte en breedte van het kader vullen, wederom met behoud van de aspect-verhouding, maar vaak met bijsnijden van de afbeelding in het proces. - none:
de afbeelding negeert de hoogte en breedte van het kader en behoudt zijn originele grootte. - verkleinen:
de afbeelding zal het verschil tussen none en contain vergelijken om de kleinste concrete objectgrootte te vinden.
Ik ben zelf een fan van de contain waarde. Dit is hoe we die eigenschap zouden kunnen instellen:
img {
height: 120px;
}
.cover {
breedte: 260px;
object-fit: cover;
}
object-fit voorbeeld
Omdat de tweede afbeelding een andere hoogte-breedte verhouding heeft dan de originele afbeelding links, zal het buiten het inhoudsvenster rekken, waardoor de bovenste en onderste delen van de afbeelding worden afgesneden.
Het is de moeite waard op te merken dat de afbeelding standaard gecentreerd is binnen zijn inhoudsvak, maar dit kan worden gewijzigd met de object-position eigenschap.
Demo object fit
De demo hieronder toont vijf voorbeelden die laten zien hoe we een afbeelding kunnen verpletteren in een inhoudsvak dat soms kleiner of groter is dan de oorspronkelijke breedte (pas de grootte van de browser aan voor een beter idee van hoe dit zou kunnen werken):
See the Pen object-fit by Robin Rendle (@robinrendle) on CodePen.