CSS Vlastnost pozice objektu
Vlastnost CSS object-positionse používá k určení, jak má být <img> nebo <video> umístěn v kontejneru.
Obrázek
Podívejte se na následující obrázek z Paříže, který má 400x300 pixelů:
Dále použijeme object-fit: cover;k dodržení poměru stran a k vyplnění daného rozměru. Obrázek však bude oříznut, aby se vešel, takto:
Příklad
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Použití vlastnosti pozice objektu
Řekněme, že zobrazená část obrázku není umístěna tak, jak chceme. K umístění obrázku použijeme object-positionvlastnost.
Zde použijeme object-positionvlastnost k umístění obrázku tak, aby byla velká stará budova uprostřed:
Příklad
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 80% 100%;
}
Zde použijeme object-positionvlastnost k umístění obrázku tak, aby slavná Eiffelova věž byla uprostřed:
Příklad
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 15% 100%;
}
Vlastnosti CSS Object-*
V následující tabulce jsou uvedeny vlastnosti CSS object-*:
| 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" |