CSS object-fit & object-position

Tab 1

All 5 object-fit Values — Click to Compare

Click any value card below to see how it affects the same image inside a fixed container. Then drag the sliders to resize the container and watch each value respond differently.

cover

Fills container, crops edges. Aspect ratio kept.

contain

Fits whole image inside. Shows letterbox.

fill

Stretches to fill. Distorts the image.

none

Original size, centered. May crop or leave space.

scale-down

Smaller of none or contain. Never upscales.

Live Preview — object-fit: cover 600 × 260px

Container Height 260px

Container Width % 100%

Which to use? Use cover for card thumbnails, hero images, and avatars — it fills the space and looks great. Use contain for logos, product images, and icons where showing the full image matters more than filling the box. Avoid fill — it always distorts.

Tab 2

object-position — Control the Focal Point

When object-fit: cover crops an image, it centers by default. object-position lets you choose which part of the image stays visible. Click a position below to see it live.

❌ Without object-position

object-position: center (default)

Subject may be cropped out depending on image composition.

✅ With object-position: top

object-position: top

Face/subject stays in frame. Same image, better crop.

🎯 Click to Set object-position

Click any position to see how the same image crops differently.

Current: center

Or use pixel/% values:

Pro tip: For portrait photos in landscape containers, use object-position: top to keep faces in frame. For landscape photos in square containers, use object-position: center (default) or a custom percentage like 50% 20% to keep the horizon visible.

Tab 3

Real Use Cases & Debug Guide

The most common places developers use object-fit, and why it sometimes silently stops working.

👤 User Avatars

❌ fill (default)

✅ cover

object-fit: cover on a fixed width/height circle keeps faces centered without distortion.

🃏 Card Thumbnails

❌ fill

✅ cover

Cards with fixed height thumbnail areas need cover — images never stretch regardless of their original dimensions.

🎬 Video Elements

video { object-fit: cover }

object-fit works on <video> too — perfect for fullscreen background videos that must fill the container without black bars.

🖼️ Logo / Product Images

Use contain for logos and product shots — the full image is always visible with no cropping, letterboxed inside the container.

🔧 object-fit Not Working? Here's Why

❌ No explicit width and height on the image ▼

object-fit only works when the <img> has a defined width and height. Without them, the image sizes to its natural dimensions and there's nothing to "fit" into.

❌ Broken

              img {

                /* no width/height */

                object-fit: cover;

                /* does nothing */

              }

✅ Fixed

              img {

                width: 100%;

                height: 200px;

                object-fit: cover;

              }

❌ Used on a non-replaced element (div, span, p) ▼

object-fit only works on replaced elements — elements where the content is external: <img>, <video>, <iframe>, <canvas>. It has no effect on <div> or any regular element.

❌ Broken (wrong element)

              /* object-fit on a div */

              .card {

                object-fit: cover;

                /* ignored on div */

              }

✅ Correct target

              .card img {

                width: 100%;

                height: 200px;

                object-fit: cover;

              }

❌ Confused object-fit with background-size ▼

Both object-fit: cover and background-size: cover do similar things — but for different elements. object-fit is for <img> and <video> tags. background-size is for CSS background images on any element.

background-size (CSS bg)

              .hero {

                background-image:

                 url(hero.jpg);

                background-size: cover;

                /* not in HTML — no SEO */

              }

object-fit (img tag)

              /* <img> in HTML — has SEO/alt */

              .hero img {

                width: 100%;

                height: 400px;

                object-fit: cover;

              }

Quick checklist: (1) Does the <img> have explicit width and height? (2) Is it on an <img> or <video> — not a <div>? (3) Meant to use background-size instead?