Widely availableSupported across all major browsers. Safe to use in production.
Other Widely available

object-position

The object-position CSS property places images, videos, and other replaced elements within their boxes.

Other

Overview

The object-position CSS property places images, videos, and other replaced elements within their boxes.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
object-position
32
79
36
10
32
10
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • Only supported for `<img>` elements.

Syntax

CSS 
.avatar {
  object-fit: cover;
  object-position: top center;
}
.hero-image {
  object-fit: cover;
  object-position: 50% 30%;
}

Live demo

top center

CSS top center demo.

PreviewFullscreen

bottom-left

CSS bottom-left demo.

PreviewFullscreen

customposition

CSS customposition demo.

PreviewFullscreen

Use cases

  • Using object-position

    The object-position CSS property places images, videos, and other replaced elements within their boxes.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features