CSS object-fit egenskab

CSS object-fit Egenskaben bruges til at specificere, hvordan <img> eller <video> størrelse skal justeres for at passe til sin beholder.

Browserunderstøttelse

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter denne egenskab.

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

CSS object-fit egenskab

CSS object-fit bruges til at specificere, hvordan <img> eller <video> størrelse skal justeres for at passe til sin beholder.

Denne egenskab fortæller, hvordan indholdet skal fyldes i en beholder. For eksempel 'bevar forholdet mellem højde og bredde' eller 'udvid og brug så meget plads som muligt'.

Se billedet af tulipaner fra Shanghai Flower Port nedenfor, det er 300x300 pixels:

Tulip

Men hvis vi sætter billedet til 200x300 pixels, vil det se sådan ud:

Tulip

Eksempel

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

Prøv selv

Vi ser, at billedet komprimeres til at passe i en 200x300 pixels container, og det oprindelige forhold mellem højde og bredde ødelægges.

Hvis vi bruger object-fit: cover;Det vil klippe billedets sider, holde forholdet mellem højde og bredde, og fylde pladsen som vist her:

Kaffe

Eksempel

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

Prøv selv

En anden eksempel

Her har vi to billeder, og vi ønsker, at de fylder 50% af browservinduets bredde og 100% af højden.

I det følgende eksempel bruger vi ikke object-fitDerfor ødelægges billedets forhold mellem højde og bredde, når vi justerer størrelsen på browservinduet:

Eksempel

Prøv selv

I det næste eksempel bruger vi object-fit: cover;Derfor bevares billedets forhold mellem højde og bredde, når vi justerer størrelsen på browservinduet:

Eksempel

Prøv selv

Alle værdierne for CSS object-fit egenskaben

object-fit Egenskaben kan acceptere følgende værdier:

  • fill - Standardværdi. Juster størrelsen på det erstatte indhold for at fylde elementets indholdskasse. Hvis nødvendigt, stræk eller komprimer objektet for at passe til dette objekt.
  • contain - Skaler det erstatte indhold for at holde forholdet mellem højde og bredde, samtidig med at det placeres i elementets indholdskasse.
  • cover - Juster størrelsen på det erstatte indholdet, så det holder forholdet mellem højde og bredde, når det fylder hele indholdskassen. Objektet vil blive beskåret for at passe til.
  • none - Ikke juster størrelsen på innholdet som erstattes.
  • scale-down - Juster innholdsstørrelsen som om det ikke er spesifisert eller inneholder innhold (vil føre til mindre konkrete objektstørrelser)

Følgende eksempel viser object-fit Alle mulige verdier for egenskapen:

Eksempel

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

Prøv selv