CSS object-fit eigenschap

CSS object-fit De eigenschap wordt gebruikt om aan te geven hoe de grootte van <img> of <video> aangepast moet worden om in te passen in zijn container.

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

Eigenschap Chrome IE Firefox Safari Opera
object-fit 31.0 16.0 36.0 7.1 19.0

CSS object-fit eigenschap

CSS object-fit De eigenschap wordt gebruikt om aan te geven hoe de grootte van <img> of <video> aangepast moet worden om in te passen in zijn container.

Deze eigenschap laat zien hoe de inhoud op verschillende manieren de container kan vullen. Bijvoorbeeld 'behoud de aspectverhouding' of 'breed zich uit en neem zoveel ruimte als mogelijk in'.

Bekijk hieronder de tulpenafbeelding van de Shanghai Flower Port, die 300x300 pixels is:

Tulpen

Maar als we het bovenstaande beeld instellen op 200x300 pixels, dan ziet het er zo uit:

Tulpen

Voorbeeld

img {
  width: 200px;
  height: 300px;
}

Probeer het zelf

We zien dat het beeld wordt gecomprimeerd om in te passen in een container van 200x300 pixels en de oorspronkelijke aspectverhouding wordt verstoord.

Als we object-fit: cover;Dus snijd het zijkant van het beeld af, behoud de aspectverhouding en vul de ruimte zoals hieronder:

Koffie

Voorbeeld

img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

Probeer het zelf

Een ander voorbeeld

Hier hebben we twee afbeeldingen en we willen dat ze elk 50% van de breedte en 100% van de hoogte van het browservenster vullen.

In het volgende voorbeeld gebruiken we niet object-fitDus, wanneer we de grootte van het browservenster aanpassen, wordt de aspectverhouding van het beeld verstoord:

Voorbeeld

Probeer het zelf

In het volgende voorbeeld gebruiken we object-fit: cover;Dus, wanneer we de grootte van het browservenster aanpassen, wordt de aspectverhouding van het beeld behouden:

Voorbeeld

Probeer het zelf

Alle waarden van de CSS object-fit-eigenschap

object-fit De eigenschap accepteert de volgende waarden:

  • fill - Standaardwaarde. Pas de grootte van de vervangen inhoud aan om de inhoudsrand van het element te vullen. Als nodig wordt het object uitgerekt of samengeperst om aan te passen.
  • contain - Zoom de vervangen inhoud in om de aspectverhouding te behouden en plaats deze in het inhoudsrand van het element.
  • cover - Pas de grootte van de vervangen inhoud aan om de aspectverhouding te behouden bij het vullen van de hele inhoudsrand van het element. Het object wordt afgesneden om aan te passen.
  • none - Pas de grootte van de vervangende inhoud niet aan.
  • scale-down - Pas de grootte van de inhoud aan alsof er geen inhoud is gespecificeerd of ingesloten inhoud (wat leidt tot een kleinere specifieke objectgrootte)

De volgende voorbeelden demonstreren object-fit Alle mogelijke waarden van de eigenschap:

Voorbeeld

fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}

Probeer het zelf