The object-fit Property in CSS

The object-fit property in CSS is used to control how an element's content (such as an image or video) fits within its container. It determines how the content is resized to fit the container while preserving its aspect ratio. This property is particularly useful for responsive designs where you want to ensure that media elements are displayed correctly without distortion.

Values of object-fit

1. object-fit: fill;

   • The content is resized to fill the container. This may distort the content as it does not preserve the aspect ratio.
   • Use Case: When you need the content to completely cover the container, regardless of distortion.

   .fill {
     object-fit: fill;
   }
   

2. object-fit: contain;

   • The content is resized to fit within the container while preserving its aspect ratio. The entire content will be visible, but there may be empty space (letterboxing) around it if the aspect ratios of the content and the container differ.
   • Use Case: When you want the entire content to be visible without distortion, but you can tolerate some empty space around it.

   .contain {
     object-fit: contain;
   }
   

3. object-fit: cover;

   • The content is resized to cover the container while preserving its aspect ratio. The content may be cropped if the aspect ratios of the content and the container differ. The container will be fully covered, and no empty space will be visible.
   • Use Case: When you want the content to completely cover the container without empty space, even if it means some of the content may be cropped.

   .cover {
     object-fit: cover;
   }
   

4. object-fit: none;

   • The content is not resized. It will be displayed at its original size, which may result in overflow if the content is larger than the container.
   • Use Case: When you want to display the content in its original size, regardless of the container size.

   .none {
     object-fit: none;
   }
   

5. object-fit: scale-down;

   • The content is resized to fit within the container, but it is scaled down only if it is larger than the container. This value is a combination of contain and none, where the content will be scaled down to fit within the container, but will not be scaled up beyond its original size.
   • Use Case: When you want to scale down the content if it's too large, but not scale up if it's smaller.

   .scale-down {
     object-fit: scale-down;
   }
   

Example

<div class="container">
  <img src="image.jpg" alt="Example Image" class="cover">
</div>

.container {
  width: 300px;
  height: 200px;
  overflow: hidden;
  border: 2px solid #ccc;
}

img {
  width: 100%;
  height: 100%;
}

.cover {
  object-fit: cover;
}

Explanation

• Container: The container has fixed dimensions of 300px by 200px.
• Image: The object-fit: cover; property ensures the image covers the entire container while preserving its aspect ratio. Some parts of the image may be cropped to fit the container completely.

Use Cases

• Responsive Images: Ensure images and videos fit properly within varying container sizes, especially for responsive designs.
• Background Images: Use object-fit to handle how background images are displayed in media elements like img and video.
• Media Elements: Apply object-fit to video or img elements to ensure they are presented correctly in different container sizes and aspect ratios.