Vlastnost CSS object-position

Obsah

Vlastnost CSS object-position se používá k určení, jak má být <img> nebo <video> umístěn ve svém kontejneru.

Obrázek

Podívejte se na následující obrázek z Paříže, který má 400x300 pixelů:

Dále použijeme vlastnost CSS

object-fit: cover;

pro zachování poměru stran a 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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}
</style>
</head>
<body>

<h2>Using object-fit: cover</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

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 vlastnost object-position.

Zde použijeme vlastnost object-position 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%;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 80% 100%;
}
</style>
</head>
<body>

<h2>Using object-position</h2>

<p>Here we will use the object-position property to position the image so that the great old building is in center:</p>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Zde použijeme vlastnost object-position 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%;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 15% 100%;
}
</style>
</head>
<body>

<h2>Using object-position</h2>

<p>Here we will use the object-position property to position the image so that the famous Eiffel Tower is in center:</p>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Vlastnosti CSS Object-*

V následující tabulce jsou uvedeny vlastnosti CSS object-*:

object-fit: Určuje, jak má být velikost <img> nebo <video> změněna, aby se vešla do kontejneru
object-position: Určuje, jak má být <img> nebo <video> umístěn s x/y souřadnice uvnitř „vlastního obsahového pole“