CSS object-fit Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The object-fit CSS property is used to control how an HTML element, typically an <img> or <video> tag, should fit within its container while maintaining its aspect ratio. It provides several options, such as "fill," which stretches the content to completely cover the container, "contain," which ensures the entire content is visible within the container without distortion, "cover," which covers the entire container while maintaining the content's aspect ratio, and others. This property is particularly useful for achieving precise control over how media elements are displayed within their parent containers, ensuring a responsive and visually appealing layout.

Initial value
fill
Applies to
Replaced elements
Inherited
No
Computed value
Specified value
Animatable
No
JavaScript syntax
object.style.objectFit

Interactive Demo

Syntax

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

Values

  • 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.

Example

<p class="test"><img src="images/tech.gif" alt=""></p> 
.test img { 
   object-fit: cover;
   height: 125px;
   width: 100%;
} 

Browser Support

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

Desktop
Edge Chrome Firefox Opera Safari
7932361910
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
3236191024.4.3

Last updated by CSSPortal on: 2nd January 2024