In web design, properly presenting images and videos across different devices can be a challenge. You have likely encountered the “squished image” problem—where a CMS or user uploads a portrait photo, but your design demands a landscape box.

This is where the CSS object-fit property becomes a game-changer. It allows developers to control how <img> or <video> elements resize to fit into their containers, much like background-size works for background images.

Whether you need to maintain aspect ratios, fill specific cards without distortion, or manage responsive layouts, object-fit is your go-to solution.

Quick Sample

Portrait Source

Landscape Source

Tiny Source

The Syntax

The syntax is straightforward. However, for object-fit to work, the element usually needs a defined height and width on the container or the image itself to reference.

img {
  width: 100%;
  height: 300px; /* Force a specific height */
  object-fit: value; 
}

Here, value can be one of the following:

• fill

• contain

• cover

• none

• scale-down

Exploring Object-Fit Values

Let’s look at how a landscape image behaves inside a square container using these different values.

Practical Examples

1. The “Card Component” (Using cover)

Imagine you have a grid of blog cards. You want a uniform look (square images), but the source images are all different shapes.

HTML:

<div class="card">
  <img src="sunset.jpg" alt="Beautiful Landscape">
</div>

CSS:

.card img {
  width: 100%;    /* Fill the width */
  height: 200px;  /* Force a square height */
  object-fit: cover; 
}

The Result: The image fills the 200px square perfectly. It maintains its aspect ratio, simply cropping off the sides that don’t fit. No squishing!

2. The “Product Lightbox” (Using contain)

For situations where you must ensure the user sees the whole image—like a product detail page—you don’t want any cropping.

CSS Adjustment:

.container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #f4f4f4; /* Optional: fills the empty space */
}

The Result: The image scales down until it fits. If the aspect ratios don’t match, the remaining space is left empty (or filled with a background color), ensuring no part of the product is hidden.

Level Up: Controlling the Crop with object-position

When you use object-fit: cover, the browser defaults to cropping the image from the center. But what if the subject of your photo (like a person’s face) is at the very top?

You can pair object-fit with the object-position property to shift the focus.

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center; /* Anchors the image to the top */
}

This ensures that if cropping occurs, it keeps the top of the image (the face) and crops the bottom.

Conclusion

The object-fit property is a powerful tool in the CSS toolkit, enabling developers to create visually consistent websites without relying on complex background-image hacks. If you want to learn more about images and how it impacts speed, this post on image optimization might be of interest.

• Use cover for layout consistency (cards, heroes, backgrounds).

• Use contain for content integrity (products, logos).

Experiment with object-fit and object-position in your next project to instantly improve your responsive image handling.