CSS object-fit Property

Definition and Usage

The object-fit property sets how the content of a replaced element — usually an <img> or <video> — is resized to fit the element’s own box.

Give the media a width and height first. Then choose a keyword: stretch with fill, crop to fill with cover, or show the whole image with contain. Crop focus is controlled by object-position. It has no effect on <iframe>, <embed>, or <fencedframe>.

CSS Syntax

Property Values

How to Use object-fit

Size the media box, then pick how the content scales inside it.

1. Use a replaced element such as <img> or <video>.
2. Give it a defined box with width and height (or fill a sized parent).
3. Set object-fit on that element. It is not inherited.
4. If cropping hides the subject, add object-position.

Live Preview

The same image sits in a fixed frame. Change object-fit and watch how it scales.

object-fit

covercontainfillnonescale-down Apply

cover contain fill none scale-down

Gray is empty space inside the frame. Cropped edges mean the image is larger than the box.

Frame

object-fit: cover

CSS Examples

Each snippet adds only what object-fit needs: a sized box and one keyword. Use Try It Yourself for a live editor.

Example 1 — Cover the Box

Fill a fixed card frame. Extra edges are cropped so the photo never stretches.

CSS

Theme Copy

<style>
  img {
    width: 240px;
    height: 140px;
    object-fit: cover;
    border: 1px solid #ccc;
  }
</style>

<img src="/images/bg-image.webp" alt="Landscape photo">

View Output Try It Yourself

Output

How It Works

1. Define the box. width and height give the image a fixed frame that may not match the photo’s ratio.
2. Keep the aspect ratio. cover scales the photo until both sides of the box are filled.
3. Crop the overflow. Parts that stick out of the box are clipped. Nothing stretches.
4. Steer the crop later. Add object-position if faces or logos sit too close to an edge.

Example 2 — Show the Whole Image

Fit the entire image inside the box. Empty bands appear when the ratios differ.

CSS

Theme Copy

<style>
  img {
    width: 240px;
    height: 140px;
    object-fit: contain;
    border: 1px solid #ccc;
    background: #f1f5f9;
  }
</style>

<img src="/images/bg-image.webp" alt="Full photo inside a frame">

View Output Try It Yourself

Output

How It Works

1. Same sized box. Only the keyword changes from Example 1.
2. Fit without cropping. contain scales until one side hits the box edge. The other side may leave a gap.
3. Gaps show the background. The light gray fill makes those empty bands easy to see.
4. Use for logos. Prefer contain when every pixel of the image must stay visible.

Example 3 — Stretch with fill

Force the image to match both sides of the box. The aspect ratio is not protected.

CSS

Theme Copy

<style>
  img {
    width: 240px;
    height: 140px;
    object-fit: fill;
    border: 1px solid #ccc;
  }
</style>

<img src="/images/bg-image.webp" alt="Stretched photo">

View Output Try It Yourself

Output

How It Works

1. fill is the default. Leaving object-fit unset behaves the same way.
2. Both axes stretch. Width and height are forced to the box, even when that warps the photo.
3. No crop and no letterbox. The frame is always completely covered.
4. Prefer cover or contain for photos. Use fill only when distortion is acceptable.

Key Takeaways