CSS object-position property

CSS object-position egenskapen används för att specificera <img> eller <video> positionen i dess container.

bild

Titta på följande bild från Wuhan, storleken är 600x400 pixlar:

Nästa steg är att vi använder object-fit: cover; för att behålla aspect ratio och fylla det angivna måtten. Emellertid kommer bilden att beskäras för att passa, se nedan:

Example

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

Try it yourself

att använda object-position egenskapen

Anta att den visade bildens del inte är på den plats vi vill ha. För att lokalisera bilden kommer vi att använda object-position egenskap.

Här kommer vi att använda object-position egenskapen för att lokalisera bilden, så att den gamla byggnaden hamnar i mitten:

Example

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

Try it yourself

Här kommer vi att använda object-position Use properties to position the image so that the famous corner pavilion of the Forbidden City is located 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 CSS object-* properties: