object-fit in CSS - Prevent Image Distortion Inside Boxes

When you set a fixed width and height for an image, it can look stretched or squashed. The object-fit property in CSS solves this problem and keeps the image proportional.

If you are searching for object-fit in CSS or the difference between cover and contain or how to prevent image distortion, this lesson is practical and direct.

What Is object-fit in CSS?

object-fit controls how an image (or video) fills its box when you define fixed dimensions like width and height.

Simple definition: object-fit in CSS controls how an image fits inside its box without distortion.

The Problem Without object-fit

img {
    width: 180px;
    height: 180px;
}

What does this code do? Forces fixed dimensions even if the image has a different ratio.

Expected result: a high chance of stretching or distortion.

Common mistake: setting width and height together without object-fit.

Result in the browser: without object-fit

The image may look distorted

Result in the browser: with object-fit: cover

Good fit with a slight crop

Main object-fit Values in CSS

1) cover

Fills the box completely while keeping the image ratio. Some parts of the image may be cropped.

img {
    object-fit: cover;
}

2) contain

Shows the entire image inside the box without cropping. Empty space may appear around it.

img {
    object-fit: contain;
}

3) fill

Fills the box completely even if the image gets distorted. This default value is usually the least suitable for photos.

img {
    object-fit: fill;
}

4) none

Displays the image at its original size without fitting.

5) scale-down

Picks between none and contain, whichever is smaller.

cover

contain

fill

object-position in CSS

When using cover, you can control which part of the image is emphasized.

img {
    width: 260px;
    height: 160px;
    object-fit: cover;
    object-position: top center;
}

What does this code do? Focuses the crop on the top part of the image.

Expected result: better control of the important visual area (face, product, logo).

Common mistake: leaving object-position default even when the key area is cut off.

Result in the browser:

Where to Use object-fit in Practice?

• Product cards.
• Article thumbnails.
• Square or circular profile images.
• With <video> in some interfaces.

Common Mistakes in object-fit CSS

1) Forgetting to set height: object-fit will not be visible.

2) Using fill by default: image distortion.

3) Ignoring object-position: important parts get cropped.

FAQ - Common Search Questions

What is the difference between object-fit: cover and contain in CSS?

cover fills the box with possible cropping, contain shows the full image with possible empty space.

How do I prevent image distortion when setting width and height in CSS?

Use object-fit: cover; or contain depending on the goal.

Why is object-fit not working for me?

Most likely the element does not have clear dimensions (especially height).

Does object-fit work with video?

Yes, it can be used with <video> as well.

What is the best object-fit value for card images?

Usually cover because it creates consistent grids.