CSS object-fit Property

The object-fit CSS property is used to control how an HTML element, typically an or

object-fit: fill | contain | cover | none | scale-down

fillThe replaced content is sized to fill the element's content box: the object's concrete object size is the element's used width and height.
containThe replaced content is sized to maintain its aspect ratio while fitting within the element's content box: its concrete object size is resolved as a contain constraint against the element's used width and height.
coverThe replaced content is sized to maintain its aspect ratio while filling the element's entire content box: its concrete object size is resolved as a cover constraint against the element's used width and height.
noneThe replaced content is not resized to fit inside the element's content box: determine the object's concrete object size using the default sizing algorithm with no specified size, and a default object size equal to the replaced element's used width and height.
scale-downSize the content as if 'none' or 'contain' were specified, whichever would result in a smaller concrete object size.

HTML

<p class="test"><img src="images/tech.gif" alt=""></p>

CSS

.test img { 
   object-fit: cover;
   height: 125px;
   width: 100%;
}

Result

The following table will show you the current browser support for the CSS object-fit property.

Last updated by CSSPortal on: 26th September 2023