CSS Die voorwerp-pas eiendom
Die CSS object-fit-eienskap word gebruik om te spesifiseer hoe 'n <img> of <video> grootte aangepas moet word om by sy houer te pas.
Die CSS objek-pas eiendom
Die CSS object-fit-eienskap word gebruik om te spesifiseer hoe 'n <img> of <video> grootte aangepas moet word om by sy houer te pas.
Hierdie eienskap vertel die inhoud om die houer op 'n verskeidenheid maniere te vul; soos "behou daardie aspekverhouding" of "rek uit en neem soveel spasie as moontlik op".
Kyk na die volgende beeld van Parys. Hierdie prent is 400 pixels breed en 300 pixels hoog:
As ons egter die prent hierbo stileer om die helfte van sy breedte (200 pixels) en dieselfde hoogte (300 pixels) te wees, sal dit soos volg lyk:
Voorbeeld
img {
width: 200px;
height:
300px;
}
Ons sien dat die prent vasgedruk word om die houer van 200x300 pixels te pas (die oorspronklike aspekverhouding is vernietig).
Hier is waar die object-fiteiendom inkom. Die object-fiteiendom kan een van die volgende waardes aanneem:
fill- Dit is verstek. Die grootte van die prent word aangepas om die gegewe dimensie te vul. Indien nodig, sal die beeld gestrek of ingedruk word om te pascontain- Die beeld behou sy aspekverhouding, maar word aangepas om binne die gegewe dimensie te pascover- Die beeld behou sy aspekverhouding en vul die gegewe dimensie. Die prent sal geknip word om te pasnone- Die prent is nie verander niescale-down- die beeld word afgeskaal tot die kleinste weergawe vannoneofcontain
Gebruik van objekpas: omslag;
As ons gebruik object-fit: cover;, behou die beeld sy aspekverhouding en vul die gegewe dimensie. Die prent sal geknip word om te pas:
Voorbeeld
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Die gebruik van objek-pas: bevat;
As ons gebruik object-fit: contain;, behou die beeld sy aspekverhouding, maar word aangepas om binne die gegewe dimensie te pas:
Voorbeeld
img {
width: 200px;
height:
300px;
object-fit: contain;
}
Die gebruik van objek-pas: vul;
As ons object-fit: fill;die beeld gebruik, word die grootte verander om die gegewe dimensie te vul. Indien nodig, sal die beeld gestrek of ingedruk word om te pas:
Voorbeeld
img {
width: 200px;
height:
300px;
object-fit: fill;
}
Gebruik van objekpassing: geen;
As ons gebruik word object-fit: none;die beeld nie verander nie:
Voorbeeld
img {
width: 200px;
height:
300px;
object-fit: none;
}
Gebruik van objekpas: afskaal;
As ons gebruik word object-fit: scale-down;die prent afgeskaal na die kleinste weergawe van noneof
contain:
Voorbeeld
img {
width: 200px;
height:
300px;
object-fit: scale-down;
}
Nog 'n voorbeeld
Hier het ons twee beelde en ons wil hê hulle moet die breedte van 50% van die blaaiervenster en 100% van die hoogte vul.
In die volgende voorbeeld gebruik ons NIE object-fit, so wanneer ons die grootte van die blaaiervenster verander, sal die aspekverhouding van die beelde vernietig word:
Voorbeeld
In die volgende voorbeeld gebruik ons object-fit: cover;, so wanneer ons die grootte van die blaaiervenster verander, word die aspekverhouding van die beelde behoue:
Voorbeeld
CSS objek-pas Meer voorbeelde
Die volgende voorbeeld demonstreer al die moontlike waardes van die object-fiteiendom in een voorbeeld:
Voorbeeld
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
CSS Object-* Eienskappe
Die volgende tabel lys die CSS objek-* eienskappe:
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-position | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |