object-fit

The object-fit property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

What Is A Replaced Element?

A replaced element is an element whose dimensions and content are defined outside the scope of CSS. Replaced elements often have intrinsic dimensions—the width and height as defined by the element itself, not imposed by the surroundings or defined in CSS. For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units, and from which the intrinsic ratio can be determined.

Dudley Storey puts it nicely when he says that ‘another way of thinking of replaced elements is “any tag that has its content replaced by an outside source”. <img> and <video> are obvious examples’.

Other examples of replaced elements are embedded documents, <textarea>s and <input> elements.

Sizing Replaced Elements Using object-fit

Sometimes, you may want or need to have all images (or videos, or inputs, etc.) on a page have the same height and width values. An example of this is avatar images in user profiles or testimonials.

The images you end up using on the page may not have the same dimensions, let alone the same aspect ratio. This is particularly common in applications where the user gets to upload and use their own images that need to be made to fit into specific spots with predefined dimesions.

Using the object-fit property, you can fit the contents of an image into the dimensions you specify in your style sheet.

The contents can be set to scale up or down, shrink or stretch as necessary to fit into the width and height you specify, using the different values of the property.

See the Values section below for a list of values and a visual illustration of the different values’ effects.

Trivia & Notes

The way the object-fit property sizes the contents of an element is very similar to the way the preserveAspectRatio attribute sizes elements in SVG using the <meetOrSlice> parameter. You can read more about how preserveAspectRatio works in SVG in this article.

After the contents of the image have been sized with object-fit, you can position them inside the image using the object-position property. The object-position property works similar to the way the <align> parameter of the preserveAspectRatio works in SVG. Refer to the object-position property’s entry for more information.