Atrybut object-position CSS

CSS object-position atrybut określa pozycję <img> lub <video> w kontenerze.

obraz

Spójrzmy na poniższy obraz z Wuhan, o rozmiarze 600x400 pikseli:

Wuhan

Następnie użyjemy object-fit: cover; do utrzymania proporcji szerokości i wysokości oraz wypełnienia określonych rozmiarów. Jednak obraz zostanie przycięty, aby pasował, jak pokazane poniżej:

Wuhan

Przykład

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
}

Spróbuj sam

użycia atrybutu object-position

Załóżmy, że część wyświetlanego obrazu nie znajduje się w pożądanym miejscu. Aby zlokalizować obraz, użyjemy object-position atrybut.

Tutaj użyjemy object-position atrybutu do lokalizacji obrazu, aby starożytna budowa znajdowała się w centrum:

Wuhan

Przykład

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 50% 100%;
}

Spróbuj sam

Tutaj użyjemy object-position Atrybuty do lokalizacji obrazu, aby znana wieża Baoan była po prawej stronie:

Wuhan

Przykład

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 25% 100%;
}

Spróbuj sam

Atrybuty CSS object-*

Poniższa tabela wymienia atrybuty CSS object-*:

Atrybut Opis
object-fit Określ, jak <img> lub <video> powinny dostosować rozmiar, aby dopasować się do ich kontenera.
object-position Określ, jak <img> lub <video> powinny być umieszczone w ich „swoim zawartościowym ramie” za pomocą współrzędnych x/y.