Home / Snippets / Layout & Grid /
Aspect-ratio card
Consistent media ratio and object-fit — prevents layout shift on image load.
16:9
Design tokens
Space is reserved before image loads.
1:1
Performance
object-fit covers without distortion.
3:4
Portrait
Works with any ratio.
Quick implementation
.media-thumb {
/* Reserves height proportional to width — prevents CLS */
aspect-ratio: 16 / 9; /* or 1, or 4/3, or 3/4 */
overflow: hidden;
}
.media-thumb img {
width: 100%;
height: 100%;
object-fit: cover; /* crops to fill without distortion */
object-position: center;
}
/* Ratio variants */
.ratio-square { aspect-ratio: 1; }
.ratio-portrait { aspect-ratio: 3 / 4; }
.ratio-wide { aspect-ratio: 21 / 9; }
/* Full card */
.media-card {
border-radius: 0.75rem;
overflow: hidden;
border: 1px solid oklch(0 0 0 / 0.07);
}
.media-card .body { padding: 0.75rem; }Prompt this to your LLM
Includes ratio variants and a React component with aspect-ratio prop.
You are a senior frontend engineer.
Goal: Build a media card component with a guaranteed aspect-ratio thumbnail area that prevents layout shift (CLS) when the image loads.
Technical constraints:
- Use aspect-ratio on the thumbnail container (not the image itself) so height is reserved before the image loads.
- The image uses width: 100%; height: 100%; object-fit: cover to fill without distortion.
- Support multiple ratio variants: 16/9 (default), 1:1 (square), 3:4 (portrait). Use a data attribute or CSS class to switch.
- The card has: thumbnail, category badge, title, description, and optional CTA.
Framework variant (pick one):
A) Vanilla HTML + CSS — three cards showing different ratios.
B) React component — MediaCard accepts src, alt, title, description, and ratio ("16/9" | "1" | "3/4") props. ratio maps to a CSS class or inline style.
Edge cases:
- Provide a background color (placeholder) on the thumbnail container so there's a visible box before the image loads.
- object-position: center is the default; mention how to shift it (e.g. object-position: top for portrait headshots).
- Lazy loading: add loading="lazy" and width/height attributes on <img> for best CLS performance.
Return full HTML + CSS (or TSX + CSS module).Why this matters in 2026
Cumulative Layout Shift (CLS) is a Core Web Vitals metric. Before aspect-ratio, images that loaded late caused cards to jump as their natural dimensions were applied. Setting aspect-ratio on the container reserves exactly the right height before the image arrives — no more layout shift.
aspect-ratio works with any intrinsic or explicit size: the container's width determines its height. object-fit: cover on the image fills the container without stretching, cropping symmetrically by default.
The logic
Set aspect-ratio: 16 / 9 on the container, overflow: hidden to clip the image, then width: 100%; height: 100%; object-fit: cover on the <img>. The container defines the box; the image fills it. Change the ratio to 1, 3/4, 21/9 for different shapes — the image adapts.
Accessibility & performance
Always write meaningful alt text on images. For decorative images, alt="" hides them from screen readers. Set explicit width and height attributes on <img> even when using aspect-ratio — the browser uses them to infer aspect ratio in older engines and they don't conflict. Add loading="lazy" for below-fold images to reduce initial load.