CSS Die voorwerp-posisie Eienskap
Die CSS object-position
-eienskap word gebruik om te spesifiseer hoe 'n <img> of <video> in sy houer geposisioneer moet word.
Die beeld
Kyk na die volgende prent van Parys, wat 400x300 pixels is:
Vervolgens gebruik object-fit: cover;
ons om die aspekverhouding te behou en om die gegewe dimensie te vul. Die prent sal egter geknip word om te pas, soos volg:
Voorbeeld
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Gebruik die objek-posisie Eienskap
Kom ons sê dat die deel van die beeld wat gewys word, nie geposisioneer is soos ons wil nie. Om die beeld te posisioneer, sal ons die object-position
eiendom gebruik.
Hier sal ons die object-position
eiendom gebruik om die beeld so te posisioneer dat die wonderlike ou gebou in die middel is:
Voorbeeld
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 80% 100%;
}
Hier sal ons die object-position
eiendom gebruik om die beeld so te posisioneer dat die beroemde Eiffeltoring in die middel is:
Voorbeeld
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 15% 100%;
}
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-posititon | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |