CSS objekt-position egenskap

Innehållsförteckning

CSS-egenskapen object-position används för att specificera hur en <img> eller <video> ska placeras i sin behållare.

Bilden

Titta på följande bild från Paris, som är 400x300 pixlar:

Därefter använder vi CSS-egenskapen

object-fit: cover;

för att behålla bildförhållandet och fylla den givna dimensionen. Bilden kommer dock att klippas så att den passar, så här:

Exempel

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

Prova själv →

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

Använda egenskapen objekt-position

Låt oss säga att den del av bilden som visas inte är placerad som vi vill. För att placera bilden använder vi egenskapen object-position.

Här kommer vi att använda egenskapen object-position för att placera bilden så att den stora gamla byggnaden är i centrum:

Exempel

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

Prova själv →

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

Här kommer vi att använda egenskapen object-position för att placera bilden så att det berömda Eiffeltornet är i centrum:

Exempel

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

Prova själv →

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

Följande tabell listar egenskaperna för CSS-objekt-*:

object-fit: Anger hur en <img> eller <video> ska storleksändras för att passa dess behållare
object-position: Anger hur en <img> eller <video> ska placeras med x/y koordinater i sin "eget innehållsruta"