CSS The object-fit Property

❮ Previous Next ❯

The CSS property called object-fit is used to decide how to change the size of an<img> or <video> so that it fits well inside its container.

The CSS object-fit Property

The CSS property called object-fit is used to determine how to adjust the size of an <img> or <video> element so that it fits nicely inside its containing element.

This property instructs the content to fit inside a container in different ways. It can either maintain its original shape or stretch to occupy the available space fully.

Take a look at this picture from Paris. The picture is 400 pixels in width and 300 pixels in height.

But, when we make the picture above narrower by half (200 pixels wide) and keep the height the same (300 pixels), it will appear like this:

The picture is getting stretched or squeezed to fit into a box that is 200 pixels wide and 300 pixels tall. This makes the picture lose its original shape.

This is where we talk about the object-fit property. The "object-fit" property can have these values:

fill - This is default. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit
contain - The image keeps its aspect ratio, but is resized to fit within the given dimension
cover - The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
none - The image is not resized
scale-down - the image is scaled down to the smallest version of none or contain

Using object-fit: cover;

When we apply object-fit: cover; to an image, it retains its original shape and fills the specified size. However, parts of the image may be cut off to make it fit.

Using object-fit: contain;

When we apply object-fit: contain; to an image, it maintains its original proportions while adjusting its size to fit within the specified dimensions.

Using object-fit: fill;

When we apply object-fit: fill; to an image, it will be adjusted to completely occupy the specified dimensions. If needed, the image might be stretched or compressed to fit them.

Using object-fit: none;

When we apply object-fit: none; to an image, it won't be resized:

Using object-fit: scale-down;

When we apply object-fit: scale-down; to an image, it shrinks to the smallest size between 'none' or 'contain'.

Another Example

We have two pictures, and we want them to take up half of the width of the web browser's window and fill the entire height of the window.

In this example, we don't use object-fit. So, when we make the browser window bigger or smaller, the pictures will lose their original shape.

In this next example, we apply object-fit: cover; to the code. This ensures that when we change the size of the browser window, the images maintain their original proportions.

CSS object-fit More Examples

This example shows different ways to use the object-fit property in HTML with different values.

CSS Object-* Properties

Below is a table that shows the CSS properties related to objects:

Property	Description
object-fit	Describes how to change the size of an image or video to fit inside its containing element.
object-position	Describes where to place an <img> or <video> using horizontal (x) and vertical (y) coordinates within its own content box.

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        width: 200px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Image</h2>
    <img src="/assets/files/bridge.jpg" alt="Paris" width="400" height="300">
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        width: 200px;
        height: 300px;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <h2>Using object-fit: cover</h2>
    <img src="/assets/files/bridge.jpg" alt="Bridge" width="400" height="300">
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        width: 200px;
        height: 300px;
        object-fit: contain;
      }
    </style>
  </head>
  <body>
    <h2>Using object-fit: contain</h2>
    <img src="/assets/files/bridge.jpg" alt="Bridge" width="400" height="300">
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        width: 200px;
        height: 300px;
        object-fit: fill;
      }
    </style>
  </head>
  <body>
    <h2>Using object-fit: fill</h2>
    <img src="/assets/files/bridge.jpg" alt="Bridge" width="400" height="300">
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        width: 200px;
        height: 300px;
        object-fit: none;
      }
    </style>
  </head>
  <body>
    <h2>Using object-fit: none</h2>
    <img src="/assets/files/bridge.jpg" alt="Bridge" width="400" height="300">
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        width: 200px;
        height: 300px;
        object-fit: scale-down;
      }
    </style>
  </head>
  <body>
    <h2>Using object-fit: scale-down</h2>
    <img src="/assets/files/bridge.jpg" alt="Bridge" width="400" height="300">
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>Not Using object-fit</h2>
    <p>Here we don't use "object-fit", so when we change the size of the browser window, the images' proportions will be messed up.</p>
    <div style="width:100%;height:400px;">
      <img src="/assets/files/bridge.jpg" alt="Bridge" style="float:left;width:50%;height:100%;">
      <img src="/assets/files/benches.jpg" alt="Benches" style="float:left;width:50%;height:100%;">
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>Using object-fit</h2>
    <p>Here we're using "object-fit: cover;". This means that when we change the size of the browser window, the images keep their original shape and size.</p>
    <div style="width:100%;height:400px;">
      <img src="/assets/files/benches.jpg" alt="Norway" style="float:left;width:50%;height:100%;object-fit:cover;">
      <img src="/assets/files/bridge.jpg" alt="Paris" style="float:left;width:50%;height:100%;object-fit:cover;">
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      .fill {
        object-fit: fill;
      }

      .contain {
        object-fit: contain;
      }

      .cover {
        object-fit: cover;
      }

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

      .none {
        object-fit: none;
      }
    </style>
  </head>
  <body>
    <h1>The object-fit Property</h1>
    <h2>No object-fit:</h2>
    <img src="/assets/files/bridge.jpg" alt="Bridge" style="width:200px;height:300px">
    <h2>object-fit: fill (this is default):</h2>
    <img class="fill" src="/assets/files/bridge.jpg" alt="Bridge" style="width:200px;height:300px">
    <h2>object-fit: contain:</h2>
    <img class="contain" src="/assets/files/bridge.jpg" alt="Bridge" style="width:200px;height:300px">
    <h2>object-fit: cover:</h2>
    <img class="cover" src="/assets/files/bridge.jpg" alt="Bridge" style="width:200px;height:300px">
    <h2>object-fit: scale-down:</h2>
    <img class="scale-down" src="/assets/files/bridge.jpg" alt="Bridge" style="width:200px;height:300px">
    <h2>object-fit: none:</h2>
    <img class="none" src="/assets/files/bridge.jpg" alt="Bridge" style="width:200px;height:300px">
  </body>
</html>

❮ Previous Next ❯

CSS Basics

CSS Properties

CSS Responsive

CSS Grid