CSS object-fit cover vs contain Playground

Your product grid has images from different sources — some are 1200×800, some are 400×400, some are 3000×1000 panoramas. You set width: 100%; height: 200px on the <img> and now everything is distorted: square logos are squashed, panoramas are stretched vertically. object-fit is the <img> and <video> equivalent of background-size, and the most common choice is simple: use cover when the box must stay full, and use contain when the whole image must stay visible.

Quick Answers

• object-fit: cover fills the box and crops the image if needed.
• object-fit: contain shows the whole image and leaves empty space if aspect ratios differ.
• object-fit: scale-down behaves like none or contain, whichever makes the rendered image smaller.
• Use object-position to choose which part stays visible when cover crops.
• object-fit works on replaced elements like <img> and <video>, but it has no effect on <iframe>, <embed>, or <fencedframe>.

Why This Playground (Not Just Reading the Docs)

object-fit has five values and they interact with object-position in non-obvious ways — especially cover vs contain, scale-down vs contain, and none vs fill. This playground shows all five values side by side on the same image, lets you drag object-position in real time, and outputs the exact CSS. Seeing the difference beats reading about it. Everything runs in your browser; no data is sent anywhere.

What Is CSS object-fit?

The CSS object-fit property controls how a replaced element — most commonly an <img> or <video> — is sized and positioned within its container. It works similarly to background-size for background images but applies directly to the element itself.

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

Without object-fit, an image stretched to a container with different proportions will appear distorted. object-fit solves this by defining a scaling strategy.

The Five object-fit Values

fill — Stretch to fill (default)

img { object-fit: fill; }

The image is stretched to exactly match the container’s width and height. Aspect ratio is not preserved. Use only when distortion is acceptable or the image and container always share the same aspect ratio.

contain — Scale to fit inside

img { object-fit: contain; }

The image is scaled (up or down) to fit entirely within the container while preserving its original aspect ratio. If the image and container have different proportions, empty space (letterboxing or pillarboxing) appears. The full image is always visible.

Typical use: product images where the full item must be visible, logos, icons.

cover — Scale to cover (most common)

img { object-fit: cover; }

The image is scaled to cover the entire container while preserving its aspect ratio. If proportions differ, the image is cropped. Pair with object-position to control which part of the image stays visible.

Typical use: hero images, card thumbnails, avatar circles — any case where you want a filled container with no empty space and distortion is unacceptable.

none — Natural size, no scaling

img { object-fit: none; }

The image is rendered at its intrinsic (natural) size, regardless of the container. If the image is larger than the container, it overflows (clipped by overflow: hidden). If it’s smaller, it leaves empty space. object-position controls which part of the image is shown.

Typical use: when you specifically want pixel-perfect display of the image at its original resolution.

scale-down — Shrink if necessary, never upscale

img { object-fit: scale-down; }

Behaves like none or contain, whichever produces a smaller rendered size. Images larger than the container are downscaled to fit (like contain). Images smaller than the container are displayed at their natural size (like none) — they are never upscaled. This prevents quality loss from upscaling.

Typical use: variable-size images that should never appear blurry from upscaling, such as user-submitted profile photos or third-party content.

object-position — Control the Focal Point

When object-fit: cover or object-fit: none clips the image, object-position determines which part remains visible. It works exactly like background-position.

img {
  object-fit: cover;
  object-position: 50% 50%; /* center (default) */
}

/* Show the top of the image */
img { object-position: 50% 0%; }

/* Show the right side of the image */
img { object-position: 100% 50%; }

/* Show the bottom-left corner */
img { object-position: 0% 100%; }

The value accepts:

• Percentage — 50% 50% (horizontal% vertical%)
• Keywords — top, bottom, left, right, center
• Length values — 20px 40px

Practical Examples

Full-width hero with fixed height

.hero {
  width: 100%;
  height: 60vh;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%; /* keep faces in frame, not the sky */
}

Square avatar thumbnail

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden; /* ensure the round clip */
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Product image with white padding

.product-card img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  background-color: #fff; /* fill letterbox area */
  padding: 8px;
}

Video background

video.bg {
  position: fixed;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
}

object-fit vs background-size

For content images (product photos, editorial images, avatars) use <img> with object-fit. For purely decorative backgrounds, use background-size.

When object-fit Is the Wrong Tool

object-fit only changes how the replaced element is painted inside its own box. It is the wrong tool in these common cases:

• You are styling a decorative background on a regular div. Use background-size: cover or contain instead.
• The element has no concrete box. If you do not set a width and height (or a container that defines them), there is nothing for object-fit to fit into.
• You need art direction, not just cropping. If mobile and desktop should use different source images, use <picture> or responsive srcset, not object-position alone.
• You are trying to affect <iframe> or <canvas>. object-fit has no effect there.

Browser Support

object-fit and object-position are supported in all modern browsers. No vendor prefixes are required.

Internet Explorer does not support object-fit. If IE support is required, a JavaScript polyfill or a background-image-based approach is needed.

Performance Notes

• object-fit is handled entirely by the browser’s layout and compositing pipeline — no JavaScript is involved.
• Always set explicit width and height attributes on <img> elements to prevent Cumulative Layout Shift (CLS). Combined with object-fit, this gives you full control over layout without sacrificing responsive images.
• Use loading="lazy" for images below the fold and fetchpriority="high" for above-the-fold hero images.

<!-- Responsive hero image — no CLS, no distortion -->
<img
  src="/hero.jpg"
  alt="Mountain landscape at sunrise"
  width="1200"
  height="600"
  style="width: 100%; height: 60vh; object-fit: cover;"
  fetchpriority="high"
/>

Frequently Asked Questions

Does object-fit affect the image’s intrinsic dimensions? No. object-fit only affects how the image is rendered visually within its container. The intrinsic dimensions (used for aspect-ratio calculation and width/height attribute CLS prevention) are unchanged.

Can I animate object-fit? No — object-fit is not animatable or interpolatable between different keyword values. You can, however, animate object-position smoothly with CSS transition.

What is the difference between cover and fill? cover preserves the image’s aspect ratio and clips to fill the container. fill ignores the aspect ratio and stretches the image to exactly match the container, which can cause distortion.

Can object-fit be used on <iframe> or <canvas>? No. object-fit has no effect on <iframe>, <embed>, and <fencedframe>, and it is not how you control drawing inside <canvas>. Use sizing rules on the surrounding layout or draw the canvas content at the correct aspect ratio instead.

When should I use scale-down instead of contain? Use scale-down when your images may be smaller than the container and you don’t want them upscaled (which would make them blurry). If all images are larger than the container, scale-down behaves identically to contain.