How to Use object-fit for Responsive Images

The object-fit CSS property is a powerful tool for handling the size and position of content within an element. It’s particularly useful when dealing with images, videos, and other media that need to fit within a defined space without distorting their aspect ratio.

In this blog post, we’ll explore the different values of the object-fit property and see how they can be applied through a simple example.

What is object-fit?

The object-fit property specifies how an element, such as an image or video, should be resized to fit its container. It determines how the content should be scaled and cropped to fill the container in the desired way.

object-fit Values

Here are the most common values for the object-fit property:

fill
contain
cover
none
scale-down

Let’s look at each of these in detail.

fill

The fill value stretches the content to fill the container, ignoring the aspect ratio. This can result in distorted images if the container’s aspect ratio differs from the content’s.

img {
  object-fit: fill;
}

contain

The contain value scales the content to fit within the container while maintaining its aspect ratio. This ensures that the entire content is visible, but it may leave some empty space in the container.

img {
  object-fit: contain;
}

cover

The cover value scales the content to cover the entire container while maintaining its aspect ratio. Some parts of the content may be cropped, but there will be no empty space.

img {
  object-fit: cover;
}

none

The none value displays the content at its original size without scaling. If the content is larger than the container, it will overflow.

img {
  object-fit: none;
}

scale-down

The scale-down value scales the content down to fit the container while maintaining its aspect ratio. If the content is smaller than the container, it will be displayed at its original size.

img {
  object-fit: scale-down;
}

Example: Applying object-fit in Practice

Let’s create a simple HTML page with a CSS style to demonstrate how these values affect an image within a container.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object Fit Example</title>
</head>
<body>
<main>
      <div class="container">
        <img src="https://i.ibb.co/z4kFzd1/sheep.jpg" alt="Example Image" style="object-fit: fill" />
        <p>Object-Fit: fill</p>
      </div>
      <div class="container">
        <img src="https://i.ibb.co/z4kFzd1/sheep.jpg" alt="Example Image" style="object-fit: contain" />
        <p>Object-Fit: contain</p>
      </div>
      <div class="container">
        <img src="https://i.ibb.co/z4kFzd1/sheep.jpg" alt="Example Image" style="object-fit: cover" />
        <p>Object-Fit: cover</p>
      </div>
      <div class="container">
        <img src="https://i.ibb.co/z4kFzd1/sheep.jpg" alt="Example Image" style="object-fit: none" />
        <p>Object-Fit: none</p>
      </div>
      <div class="container">
        <img
          src="https://i.ibb.co/z4kFzd1/sheep.jpg"
          alt="Example Image"
          style="object-fit: scale-down"
        />
        <p>Object-Fit: scale-down</p>
      </div>
    </main>
 </body>
</html>

body {
  font-family: "Rubik", system-ui;
}

main {
  display: flex;
  flex-direction: row;
  gap: 40px;
  width: 700px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.container {
  width: 300px;
  height: 200px;
  border: 1px solid #000;
  margin-bottom: 20px;
}
.container img {
  width: 100%;
  height: 100%;
}

Output:

See the Pen Understanding Object-Fit CSS by Sunil Pradhan (@Sunil_Pradhan) on CodePen.

In this example, we have five containers, each demonstrating a different object-fit value. The containers are of fixed size, and we apply the object-fit property directly to the images.

Conclusion

The object-fit property is a versatile tool for controlling how media content fits within its container. Whether you need to fill, contain, cover, or scale down your content, object-fit provides the necessary options to achieve the desired visual effect.

Experiment with these values to see how they can enhance your web designs and improve the user experience.

Feel free to share your thoughts or ask any questions in the comments below! Happy coding!