CSS Właściwość object-position
Właściwość CSS object-positionsłuży do określenia, jak <img> lub <video> powinien być umieszczony w jego kontenerze.
Obraz
Spójrz na następujący obraz z Paryża o wymiarach 400x300 pikseli:
Następnie używamy object-fit: cover;do zachowania proporcji i wypełnienia danego wymiaru. Jednak obraz zostanie przycięty, aby dopasować, w następujący sposób:
Przykład
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Korzystanie z właściwości pozycji obiektu
Załóżmy, że pokazana część obrazu nie jest ustawiona tak, jak chcemy. Do pozycjonowania obrazu użyjemy object-positionwłaściwości.
Tutaj użyjemy tej object-positionwłaściwości, aby ustawić obraz tak, aby wielki stary budynek był w centrum:
Przykład
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 80% 100%;
}
Tutaj użyjemy tej object-positionwłaściwości, aby ustawić obraz tak, aby słynna Wieża Eiffla znajdowała się w centrum:
Przykład
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 15% 100%;
}
CSS Object-* Właściwości
Poniższa tabela zawiera listę właściwości 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" |