CSS objekt-position egenskab

Indholdsfortegnelse

    Vis indholdsfortegnelse

CSS-egenskaben object-position bruges til at angive, hvordan en <img> eller <video> skal placeres i sin beholder.

Billedet

Se på følgende billede fra Paris, som er 400x300 pixels:

Paris

Dernæst bruger vi CSS-egenskaben

object-fit: cover;

for at bevare billedformatet og udfylde den givne dimension. Billedet vil dog blive klippet, så det passer, sådan her:

Paris

Eksempel

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

Prøv det selv →

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

Brug af objekt-position egenskaben

Lad os sige, at den del af billedet, der vises, ikke er placeret, som vi ønsker. For at placere billedet bruger vi egenskaben object-position.

Her vil vi bruge egenskaben object-position til at placere billedet, så den store gamle bygning er i centrum:

Paris

Eksempel

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

Prøv det selv →

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

Her vil vi bruge egenskaben object-position til at placere billedet, så det berømte Eiffeltårn er i centrum:

Paris

Eksempel

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

Prøv det selv →

<!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 Objekt-* Egenskaber

Følgende tabel viser egenskaberne for CSS-objekt-*:

object-fit

Specificerer, hvordan en <img> eller <video> skal ændres, så den passer til dens beholder

object-position

Angiver, hvordan en <img> eller <video> skal placeres med x/y koordinater inde i sin "egen indholdsboks"