CSS objektumpozíció tulajdonság

Tartalomjegyzék

A CSS objektumpozíció tulajdonsága az <img> vagy <video> elhelyezésének meghatározására szolgál a tárolójában.

A kép

Nézze meg a következő képet Párizsból, amely 400x300 pixeles:

Ezután a CSS tulajdonságot használjuk

object-fit: cover;

a méretarány megtartásához és az adott dimenzió kitöltéséhez. A kép azonban a méretre lesz vágva, így:

Példa

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
}

Próbálja ki Ön is →

<!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>

Az objektumpozíció tulajdonság használata

Tegyük fel, hogy a képnek a megjelenített része nem úgy van elhelyezve, ahogy szeretnénk. A kép elhelyezéséhez az objektumpozíció tulajdonságot fogjuk használni.

Itt az object-position tulajdonságot fogjuk használni, hogy a képet úgy helyezzük el, hogy a nagy régi épület középen legyen:

Példa

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
  object-position: 80% 100%;
}

Próbálja ki Ön is →

<!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>

Itt az object-position tulajdonságot fogjuk használni a kép elhelyezéséhez úgy, hogy a híres Eiffel-torony a közepén legyen:

Példa

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
  object-position: 15% 100%;
}

Próbálja ki Ön is →

<!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>

CSS-objektum-* Tulajdonságok

Az alábbi táblázat felsorolja a CSS objektum* tulajdonságait:

object-fit: Meghatározza, hogy az <img> vagy <video> hogyan legyen átméretezve, hogy illeszkedjen a tárolójához
object-position: Meghatározza, hogy az <img> vagy <video> hogyan helyezkedjen el az x/y-val koordinálja a "saját tartalomdobozában"