How to use the Object-Fit Property in CSS | Code Boost
Description: 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 uploa...

Article

# How to use the Object-Fit Property in CSS

By Matt · Mar 19, 2024

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.

CSS

    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.

Value | What it does | Best Use Case
`fill` | (Default) Stretches the content to match the container width and height perfectly. This often leads to distortion (squished images). | Rarely used, unless distortion is an artistic choice.
`contain` | Scales the content to fit the container while preserving aspect ratio. The whole image is visible, but empty space (letterboxing) may appear. | Product images or data visualizations where seeing the entire image is mandatory.
`cover` | Resizes the image to cover the entire container while maintaining aspect ratio. The edges of the image are clipped (cropped) to fit. | Hero banners, user avatars, and card thumbnails.
`none` | Ignores the container size and displays the image at its original resolution. | Patterned backgrounds or specific decorative elements.
`scale-down` | Compares `none` and `contain` and selects whichever results in the smaller image. | Icons or logos that should never be upscaled and pixelated.

## 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:

HTML

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

CSS:

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:

CSS

    .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.

CSS

    .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.