Egenskapen object-fit
Egenskapen object-fit setter
sideforholdet eller skaleringen
av elementer som bilder
eller video.
Syntaks
selector {
object-fit: fill eller contain eller cover eller none;
}
Tabellen nedenfor viser hovedverdiene for
egenskapen object-fit:
Verdier
| Verdi | Beskrivelse |
|---|---|
fill |
Skalerer elementet for å fylle de oppgitte dimensjonene, men ignorerer elementets proporsjoner. |
contain |
Skalerer elementet for å passe inn i de oppgitte dimensjonene, og bevarer elementets proporsjoner. |
cover |
Elementets dimensjoner endres for å fylle hele det angitte området, mens proporsjonene til elementet beholdes. |
none |
Elementets opprinnelige dimensjoner beholdes. |
Eksempel
La oss sette bildet vårt til å fylle de angitte dimensjonene uten å bevare proporsjonene:
<div>
<img src="bg.png">
</div>
img {
object-fit: fill;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Eksempel
La oss nå gjøre slik at bildet fyller den angitte beholderen mens proporsjonene bevares:
<div>
<img src="bg.png">
</div>
img {
object-fit: contain;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Eksempel
La oss fylle beholderen vår med bildet vårt slik at størrelsen på bildet selv endres, men samtidig bevares dens proporsjoner:
<div>
<img src="bg.png">
</div>
img {
object-fit: cover;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Eksempel
La oss bare plassere bildet vårt i den angitte beholderen med dens opprinnelige dimensjoner intakt:
<div>
<img src="bg.png">
</div>
img {
object-fit: none;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Se også
-
egenskapen
aspect-ratio,
som definerer sideforholdet til et element