CSS object-fit Property

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.

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

Last updated by CSSPortal on: 3rd November 2019