CSS object-fit Control Image Display in Containers

Introduction

The object-fit property in CSS is super handy for controlling how images and videos fit within their containers. It’s a game-changer for responsive design, ensuring that media elements look great on any screen size.

Specification

The object-fit property is defined in the CSS Images Module Level 3. This module sets the rules for handling images and other replaced elements in web design. By following these standards, object-fit ensures consistency across different browsers and platforms.

Description

The object-fit CSS property controls how images and videos fit within their containers. It’s crucial for maintaining the aspect ratio and ensuring that media elements display correctly on different devices.

With object-fit, you can make sure media elements fit their containers perfectly, whether you want to maintain the aspect ratio, crop the content, or stretch it to fit.

Syntax

The object-fit property is easy to use. Here’s the basic syntax:

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

/* Global values */
object-fit: inherit;
object-fit: initial;
object-fit: revert;
object-fit: revert-layer;
object-fit: unset;

Each value dictates how the content should be resized to fit its container.

Values

Here are the possible values for object-fit and what they do:

contain

The content is scaled to maintain its aspect ratio while fitting within the container. The entire object will fit within the box, but there may be empty space around it.

cover

The content is sized to maintain its aspect ratio while filling the entire container. If the aspect ratio doesn’t match, parts of the content may be cropped.

fill

The content is sized to fill the container exactly, potentially stretching the content to fit.

none

The content is not resized.

scale-down

The content is sized as if none or contain were specified, whichever results in a smaller object size.

Global Values

• inherit: Inherits the value from its parent element.
• initial: Sets the value to its default value.
• revert: Resets the property to its default value, ignoring any parent element’s value.
• revert-layer: Resets the property to its default value, ignoring any parent element’s value, but considering the CSS cascade layers.
• unset: Resets the property to its natural value, which means if the property is naturally inherited, it acts like inherit; otherwise, it acts like initial.

Formal Definition

Here’s a breakdown of the formal definition of object-fit:

• Initial value: The default value is fill.
• Applies to: Replaced elements like images and videos.
• Inherited: No, it doesn’t inherit from parent elements.
• Computed value: The value you specify.
• Animation type: Changes are applied discretely, not smoothly.

Examples

HTML

<section>
  <h2>object-fit: fill</h2>
  <img class="fill" src="WebsiteUrl" alt="MDN Logo" />
  <img class="fill narrow" src="WebsiteUrl" alt="MDN Logo" />

  <h2>object-fit: contain</h2>
  <img class="contain" src="WebsiteUrl" alt="MDN Logo" />
  <img class="contain narrow" src="WebsiteUrl" alt="MDN Logo" />

  <h2>object-fit: cover</h2>
  <img class="cover" src="WebsiteUrl" alt="MDN Logo" />
  <img class="cover narrow" src="WebsiteUrl" alt="MDN Logo" />

  <h2>object-fit: none</h2>
  <img class="none" src="WebsiteUrl" alt="MDN Logo" />
  <img class="none narrow" src="WebsiteUrl" alt="MDN Logo" />

  <h2>object-fit: scale-down</h2>
  <img class="scale-down" src="WebsiteUrl" alt="MDN Logo" />
  <img class="scale-down narrow" src="WebsiteUrl" alt="MDN Logo" />
</section>

CSS

h2 {
  font-family: Courier New, monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  margin: 10px 0;
}

.narrow {
  width: 100px;
  height: 150px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

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

Result

This example shows how different object-fit values affect the display of images within their containers. Each image demonstrates a specific behavior, helping you understand the differences.

Additional Example

HTML

<div class="image-container">
  <h2>object-fit: cover</h2>
  <img class="image-fit" src="WebsiteUrl" alt="The Sower" />
</div>

CSS

.image-container {
  margin: 20px 0;
}

.image-fit {
  object-fit: cover;
  width: 150px;
  height: 350px;
  border: 2px solid teal;
}

Result

This example shows an image being cropped to fit its container using object-fit: cover. The image maintains its aspect ratio but is clipped to fill the container’s dimensions exactly.

Interactive Example

HTML

<div class="interactive-example">
  <h2>Interactive object-fit Example</h2>
  <img id="interactive-image" src="WebsiteUrl" alt="The Sower" />
  <button onclick="changeObjectFit('fill')">Fill</button>
  <button onclick="changeObjectFit('contain')">Contain</button>
  <button onclick="changeObjectFit('cover')">Cover</button>
  <button onclick="changeObjectFit('none')">None</button>
  <button onclick="changeObjectFit('scale-down')">Scale-down</button>
</div>

CSS

.interactive-example {
  margin: 20px 0;
}

#interactive-image {
  width: 200px;
  height: 350px;
  border: 1px solid #666;
}

JavaScript

function changeObjectFit(value) {
  document.getElementById('interactive-image').style.objectFit = value;
}

Result

This interactive example allows users to see the effects of different object-fit values in real-time by clicking buttons. The image will change its fitting behavior based on the selected value.

Specifications

The object-fit property is defined in the CSS Images Module Level 3 specification. This module outlines the behavior and rules for handling images and other replaced elements in web design. The object-fit property is a crucial part of this specification, providing developers with the tools to control how elements fit within their containers.

Browser Compatibility

The object-fit property is widely supported across modern web browsers, making it a reliable tool for web developers. Below is a summary of browser compatibility for the object-fit property:

See Also

For further exploration and related CSS properties, you may also want to check out:

• [object-position]WebsiteUrl: This property allows you to alter the alignment of the replaced element’s content object within the element’s box.
• [image-orientation]WebsiteUrl: This property specifies the orientation of an image.
• [image-rendering]WebsiteUrl: This property provides hints to the browser about how to make speed vs. quality trade-offs when rendering images.
• [image-resolution]WebsiteUrl: This property specifies the resolution of an image.
• [background-size]WebsiteUrl: This property specifies the size of the background images.
• [Understanding aspect ratios]WebsiteUrl: This guide helps you understand the concept of aspect ratios in web design.

Help Improve MDN

Was this page helpful to you? If you found this information useful, consider contributing to MDN Web Docs. Your contributions can help improve the quality and accuracy of the documentation, making it a valuable resource for the web development community.

To learn more about how you can contribute, visit the [MDN Contribution Guidelines]WebsiteUrl. Your input is greatly appreciated and can make a significant difference in the quality of web development resources available to everyone.

This page was last modified on Jul 15, 2024, by [MDN contributors]WebsiteUrl. If you encounter any issues or have suggestions for improvement, please [report a problem with this content]WebsiteUrl.

Your feedback is essential in maintaining the quality and relevance of MDN Web Docs, ensuring that it remains a valuable resource for the web development community.