Vetia object-fit
Vetia object-fit përcakton
raportin e pamjeve ose shkallëzimin
e elementeve të tilla si imazhet
ose videot.
Sintaksa
përzgjedhësi {
object-fit: fill ose contain ose cover ose none;
}
Në tabelë janë paraqitur vlerat kryesore për
vetinë object-fit:
Vlerat
| Vlera | Përshkrimi |
|---|---|
fill |
Shkallëzimi i elementit për t'iu përshtatur përmasave të dhëna, duke shpërfillur raportet e pamjeve të elementit. |
contain |
Shkallëzimi i elementit për t'iu përshtatur përmasave të dhëna, duke ruajtur raportet e pamjeve të elementit. |
cover |
Përmasat e elementit ndryshohen, për të mbushur plotësisht zonën e specifikuar, duke ruajtur raportet e pamjeve të vetë elementit. |
none |
Përmasat origjinale të elementit ruhen. |
Shembull
Le t'i caktojmë imazhit tonë mbushjen e përmasave të specifikuara pa ruajtur raportet e pamjeve:
<div>
<img src="bg.png">
</div>
img {
object-fit: fill;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Shembull
Tani le ta bëjmë që imazhi të mbushë kontenierin e specifikuar duke ruajtur raportet e pamjeve:
<div>
<img src="bg.png">
</div>
img {
object-fit: contain;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Shembull
Le ta mbushim me imazhin tonë kontenierin e specifikuar në mënyrë që madhësia e vetë imazhit të ndryshojë, por duke ruajtur raportet e tij të pamjeve:
<div>
<img src="bg.png">
</div>
img {
object-fit: cover;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Shembull
Le ta vendosim thjesht imazhin tonë në kontenierin e specifikuar duke ruajtur përmasat e tij origjinale:
<div>
<img src="bg.png">
</div>
img {
object-fit: none;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Shihni gjithashtu
-
vetia
aspect-ratio,
e cila përcakton raportin e pamjeve të elementit