Proprietatea object-fit
Proprietatea object-fit definește
raportul de aspect sau scalarea
unor elemente precum imaginea
sau videoclipul.
Sintaxă
selector {
object-fit: fill sau contain sau cover sau none;
}
În tabel sunt prezentate valorile principale pentru
proprietatea object-fit:
Valori
| Valoare | Descriere |
|---|---|
fill |
Scalarea elementului pentru a se potrivi cu dimensiunile date, în timp ce proporțiile elementului sunt ignorate. |
contain |
Scalarea elementului pentru a se potrivi cu dimensiunile date, în timp ce proporțiile elementului sunt păstrate. |
cover |
Dimensiunile elementului sunt modificate pentru a umple complet zona indicată, în timp ce proporțiile elementului în sine sunt păstrate. |
none |
Dimensiunile originale ale elementului sunt păstrate. |
Exemplu
Să setăm imaginii noastre umplerea dimensiunii indicate fără păstrarea proporțiilor:
<div>
<img src="bg.png">
</div>
img {
object-fit: fill;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Exemplu
Acum să facem ca imaginea să umple containerul indicat cu păstrarea proporțiilor:
<div>
<img src="bg.png">
</div>
img {
object-fit: contain;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Exemplu
Să umplem cu imaginea noastră containerul indicat astfel încât dimensiunea imaginii în sine să se modifice, dar în același timp proporțiile sale să fie păstrate:
<div>
<img src="bg.png">
</div>
img {
object-fit: cover;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Exemplu
Să plasăm imaginea noastră în containerul indicat păstrându-i dimensiunile originale:
<div>
<img src="bg.png">
</div>
img {
object-fit: none;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Vedeți și
-
proprietatea
aspect-ratio,
care definește raportul de aspect al elementului