Skip to main content

Introduction to CSS Object-fit

CSS Object-fit Property​

The object-fit property is a CSS property that specifies how an element, such as an image or video, should be resized to fit its container. It is used to control the aspect ratio of an element, and can be particularly useful when working with responsive design.

The object-fit property can take several values:

  • fill: This value stretches the image to fill the container, potentially distorting its aspect ratio.

  • contain: This value scales the image so that it fits entirely within the container, preserving its aspect ratio.

  • cover: This value scales the image so that it covers the entire container, potentially cropping parts of the image to preserve its aspect ratio.

  • none: This value displays the entire image within the container, without any scaling or cropping.

  • scale-down: This value scales the image down if it is larger than the container, otherwise it behaves like contain.

As an example:

Editor

Loading...

In this example:

  • We have a div element with a class of image-container that has a fixed height of 400 pixels and a width of 100%.
  • We then have an img element inside the container with its width and height set to 100%, and we're applying the object-fit property with a value of cover, which scales the image so that it covers the entire container while preserving its aspect ratio.

The object-fit:cover​

Here's an example of using object-fit: cover property:

<!DOCTYPE html>
<html>
  <head>
    <title>Object Fit Cover Example</title>
    <style>
      .image-container {
        width: 400px;
        height: 400px;
        overflow: hidden;
      }

      .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <h1>Object Fit Cover Example</h1>
    <div class="image-container">
      <img src="example.jpg" alt="Example Image" />
    </div>
  </body>
</html>

In this example:

  • We have an HTML document that includes a div element with a class of image-container and an img element inside it.
  • We've applied some CSS styles to the image-container and img elements to create the cover effect.
  • The image-container has a fixed width and height of 400 pixels, and we're applying overflow: hidden; to the container.
  • This means that any content that overflows the container will be hidden.
  • Inside the container, we have an img element with its width and height set to 100%, and we're applying the object-fit property with a value of cover, which scales the image so that it covers the entire container while preserving its aspect ratio.
  • This results in a "cover" effect, where the image is scaled to fill the container and any parts of the image that overflow the container are hidden.

The object-fit:contain​

Here's an example of using object-fit: contain property:

<!DOCTYPE html>
<html>
  <head>
    <title>Object Fit Contain Example</title>
    <style>
      .image-container {
        width: 400px;
        height: 400px;
        border: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .image-container img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
    </style>
  </head>
  <body>
    <h1>Object Fit Contain Example</h1>
    <div class="image-container">
      <img src="example.jpg" alt="Example Image" />
    </div>
  </body>
</html>

In this example:

  • Inside the container, we have an img element with its max-width and max-height set to 100%, and we're applying the object-fit property with a value of contain, which scales the image so that it fits entirely within the container while preserving its aspect ratio.
  • This results in a "contain" effect, where the entire image is visible within the container, but there may be empty space around the image if the aspect ratio of the container is different from that of the image.

The object-fit:fill​

Here's an example of using object-fit: fill property:

<!DOCTYPE html>
<html>
<head>
  <title>Object Fit Fill Example</title>
  <style>
    .image-container {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .image-container img {
      max-width: 100%;
      max-height: 100%;
      object-fit: fill;
    }
  </style>
</head>
<body>
  <h1>Object Fit Fill Example</h1>
  <div class="image-container">
    <img src="example.jpg" alt="Example Image">
  </div>
</body>
</html>

In this example:

  • Inside the container, we have an img element with its max-width and max-height set to 100%, and we're applying the object-fit property with a value of fill, which scales the image so that it completely fills the container, even if the aspect ratio of the image doesn't match that of the container.
  • This results in a "fill" effect, where the entire container is filled with the image, and parts of the image may be cropped if the aspect ratio of the container is different from that of the image.

The object-fit:none​

Here's an example of using object-fit: none property:

<!DOCTYPE html>
<html>
  <head>
    <title>Object Fit None Example</title>
    <style>
      .image-container {
        width: 400px;
        height: 400px;
        border: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .image-container img {
        max-width: 100%;
        max-height: 100%;
        object-fit: none;
      }
    </style>
  </head>
  <body>
    <h1>Object Fit None Example</h1>
    <div class="image-container">
      <img src="example.jpg" alt="Example Image" />
    </div>
  </body>
</html>

In this example:

  • Inside the container, we have an img element with its max-width and max-height set to 100%, and we're applying the object-fit property with a value of none, which disables any object fitting.
  • This means that the image will be displayed in its original size and aspect ratio, and the container will adjust its size to fit the image.

The object-fit:scale-down​

Here's an example of using object-fit: scale-down property:

<!DOCTYPE html>
<html>
  <head>
    <title>Object Fit Scale-Down Example</title>
    <style>
      .image-container {
        width: 400px;
        height: 400px;
        border: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .image-container img {
        max-width: 100%;
        max-height: 100%;
        object-fit: scale-down;
      }
    </style>
  </head>
  <body>
    <h1>Object Fit Scale-Down Example</h1>
    <div class="image-container">
      <img src="example.jpg" alt="Example Image" />
    </div>
  </body>
</html>

In this example:

  • Inside the container, we have an img element with its max-width and max-height set to 100%, and we're applying the object-fit property with a value of scale-down, which scales the image down to fit within the container if it is larger than the container's dimensions.