CSS Object-position Property

The object-position CSS property specifies the alignment of the selected replaced element’s contents within the element’s box. Areas of the box which aren’t covered by the replaced element’s object will show the element’s background.

You can adjust how the replaced element’s object’s intrinsic size (that is, its natural size) is adjusted to fit within the element’s box using the object-fit property.

Definition and Usage

The object-position property is used together with object-fit to specify how an <img> or <video> should be positioned with x/y coordinates inside its “own content box”.

See the Pen CSS Object position property demo by Carles Rider (@carlesrider) on CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *