Settings - JSFiddle - Code Playground

y4tcjwb1

No-Library (pure JS), HTML, CSS, JavaScript

Standard eBooks css full

No-Library (pure JS), HTML, CSS, JavaScript

typo1 Typography Tests

No-Library (pure JS), HTML, CSS, JavaScript

The object-position property is used in conjunction with object-fit property and defines how an element such as a video or image is positioned with X/Y coordinates inside its content-box. This property takes two numerical values, such as 0 10% or 0 10px. In those examples, the first number indicates that the image should be placed at the left of the content box (0), the second that it should be positioned 10% or 10px from the top. It is also possible to use negative values. The default value for object-position is 50% 50% when using the object-fit property on an image, so that by default all images are positioned in the center of their content box, like so:

object-position rem

The object-position property is used in conjunction with object-fit property and defines how an element such as a video or image is positioned with X/Y coordinates inside its content-box. This property takes two numerical values, such as 0 10% or 0 10px. In those examples, the first number indicates that the image should be placed at the left of the content box (0), the second that it should be positioned 10% or 10px from the top. It is also possible to use negative values. The default value for object-position is 50% 50% when using the object-fit property on an image, so that by default all images are positioned in the center of their content box, like so:

IMG object-fit

The object-fit property defines how an element responds to the height and width of its content box. It's intended for images, videos and other embeddable media formats in conjunction with the object-position property. Used by itself, object-fit lets us crop an inline image by giving us fine-grained control over how it squishes and stretches inside its box.