CSS — Object-fit

The problem

A 4000×3000 photo squeezed into a 300×200 card either distorts or letterboxes. object-fit decides which:

.card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;      /* fill box, crop overflow — keep proportions */
}

Value	Behavior	Use when
cover	fills box, crops excess	photos in fixed cards (default choice)
contain	whole image visible, may letterbox	logos, diagrams, product shots
fill	stretches to box (distorts!) — the default	rarely
none	natural size, cropped	pixel-art
scale-down	like contain, but never enlarges	small icons in big slots

Cover + position — art direction

When cropping cuts off the subject, choose what stays visible:

.portrait {
    object-fit: cover;
    object-position: top center;   /* keep faces, lose feet */
}
.landscape {
    object-fit: cover;
    object-position: 70% 50%;      /* bias toward right side */
}

(The frame keeps its size; the window onto the image slides.)

Uniform card grids — the killer app

.grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
}

Every tile identical regardless of source dimensions — mixed portrait/landscape/square uploads all become tidy 4:3 crops. This trio (width + aspect-ratio + object-fit) replaces hundreds of lines of old hacks.

Avatars

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;      /* rectangular upload → clean circle */
}

Without cover, non-square uploads squash into ovals.

Works on video too

.hero-video {
    width: 100%;
    height: 100vh;
    object-fit: cover;      /* fullscreen background video */
    position: absolute;
    inset: 0;
}

Same property, same behavior.

contain vs scale-down difference

contain will ENLARGE a tiny image (blurry). scale-down shows it at natural size if smaller than the slot:

.logo-slot { object-fit: contain; }      /* always maximize */
.icon-slot { object-fit: scale-down; }   /* respect small sources */

Fallback awareness

Supported everywhere modern. The ancient alternative for cover-behavior was background-image + background-size:cover on a div — still valid when you want a decorative (non-semantic) image anyway.

Remember: object-fit needs BOTH dimensions constrained (width AND height/aspect-ratio) to have anything to fit against. One auto dimension and there's nothing to crop.

Mini Practice

1. Same photo through all five values side by side.
2. 4:3 card grid with mixed-size uploads — all tidy.
3. Circle avatar from a rectangular photo.
4. Fix a cropped face with object-position: top.
5. Fullscreen background video with overlay text.

Next: style images →