CSS object-position 属性
- Previous Page CSS object-fit
- Next Page CSS Mask
CSS object-position ay ginagamit upang tiyakin ang lokasyon ng <img> o <video> sa loob ng kanilang konteyner.
ang atrubuto
Tingnan ang larawan na ito mula sa Wuhan, sukat na 600x400 pixels:
Susunod na, gagamitin namin object-fit: cover; upang panatilihin ang asyeto at pumuno sa ibinigay na sukat. Gayunman, ang larawan ay mabubuhat upang umangkop, tulad ng ito:
Sample
img {
width: 266px;
height: 400px;
object-fit: cover;
}
ang atrubuto object-position
Assuming na ang bahagi ng inihahayag na larawan ay hindi ang inaasahan na lokasyon. Upang lokalisar ang larawan, gagamitin namin object-position ang atrubuto.
Dito, gagamitin namin object-position ang atrubuto upang lokalisar ang larawan, upang ilagay ang lumang gusali sa gitna:
Sample
img {
width: 266px;
height: 400px;
object-fit: cover;
object-position: 50% 100%;
}
Dito, gagamitin namin object-position Atributo upang mapalitan ang lokasyon ng imahe, upang ilagay ang tanyag na gilid na torre ng Forbidden City sa kanan:
Sample
img {
width: 266px;
height: 400px;
object-fit: cover;
object-position: 25% 100%;
}
CSS object-* Atributo
Ang sumusunod na talahanayan ay naglilista ng CSS object-* na atributo:
| Atributo | Paglalarawan |
|---|---|
| object-fit | Tukoy kung paano ayusin ang laki ng <img> o <video> upang maging tugma sa kanyang konteyner. |
| object-position | Tukoy kung paano mapapalitan ang <img> o <video> sa kanyang 'sariling kahon ng nilalaman' sa pamamagitan ng x/y coordinate. |
- Previous Page CSS object-fit
- Next Page CSS Mask
