CSS object-position Property

CSS object-position Eigenschaft wird verwendet, um die Position von <img> oder <video> innerhalb ihres Containers zu bestimmen.

Bildevorlage

Sehen Sie sich das folgende Bild aus Wuhan an, das 600x400 Pixel groß ist:

Als nächstes verwenden wir object-fit: cover; verwenden, um den Seitenverhältnissen beizubehalten und die angegebenen Abmessungen zu füllen. Allerdings wird das Bild so zugeschnitten, wie gezeigt:

Example

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

Try It Yourself

Eigenschaft object-position

Angenommen, der angezeigte Bildteil ist nicht an der gewünschten Position. Um das Bild zu positionieren, werden wir die object-position Eigenschaft.

Hier werden wir die object-position Eigenschaft verwenden, um das Bild zu positionieren, sodass das alte Gebäude in der Mitte liegt:

Example

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

Try It Yourself

Hier werden wir die object-position Use properties to position the image so that the famous corner tower of the Forbidden City is on the right:

Example

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

Try It Yourself

CSS object-* Properties

The following table lists the CSS object-* properties: