Home / Snippets / Color & Theming /
aspect-ratio for images
Lock images and media to consistent proportions using aspect-ratio — eliminates cumulative layout shift and padding-hack workarounds.
Quick implementation
/* Apply to img, video, or any block element */
img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* Common ratio utilities */
.ratio-square { aspect-ratio: 1 / 1; }
.ratio-widescreen { aspect-ratio: 16 / 9; }
.ratio-standard { aspect-ratio: 4 / 3; }
.ratio-portrait { aspect-ratio: 3 / 4; }
/* Apply to all */
.ratio-square,
.ratio-widescreen,
.ratio-standard,
.ratio-portrait {
width: 100%;
object-fit: cover;
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building a responsive image component system.
Goal: Use CSS aspect-ratio to maintain consistent image proportions across 1:1, 16:9, and 4:3 formats — no padding hacks, no JavaScript.
Technical constraints:
- Use aspect-ratio with width: 100% so the image scales responsively within its grid cell.
- Use object-fit: cover to fill the box without distortion when real images are present.
- Define utility classes for common ratios: 1/1, 16/9, 4/3, and 3/4 (portrait).
- For placeholder/skeleton states use a CSS gradient with oklch() colors — no external images.
- Ensure no cumulative layout shift (CLS) — the browser must reserve space before the image loads.
Framework variant (pick one):
A) Vanilla CSS utility classes compatible with any img or div element.
B) React component — accept ratio prop (e.g., "16/9"), src, alt, and a fallback gradient color.
Edge cases to handle:
- If no explicit height is set and the image has no intrinsic size yet, aspect-ratio reserves the correct space.
- object-fit is ignored on non-replaced elements (divs) — document that divs need explicit height or use the aspect-ratio box as a wrapper.
- Safari 14 and below do not support aspect-ratio — provide the padding-bottom percentage fallback.
Return CSS.Why this matters in 2026
Cumulative Layout Shift (CLS) is a Core Web Vital, and images without declared dimensions are its most common cause. Before aspect-ratio, developers used the "padding-bottom hack" — a fragile technique that required wrapper elements and specific positioning. Today, aspect-ratio is the correct, readable solution supported by every browser in active use.
The logic
When you set aspect-ratio: 16 / 9 and width: 100% on an image, the browser computes the height automatically before the image file has loaded. This reserves the correct amount of vertical space in the document flow, preventing any content below from jumping when the image renders. Pair with object-fit: cover to crop the image to fill the box exactly — the aspect ratio is honoured regardless of the image's intrinsic dimensions.
Accessibility & performance
Always provide meaningful alt text on <img> elements even when using aspect-ratio — the layout property has no effect on screen reader output. For purely decorative images use alt="". Add loading="lazy" on images below the fold and fetchpriority="high" on the largest above-fold image (LCP candidate). The browser's space reservation from aspect-ratio means lazy-loaded images trigger the Intersection Observer at the correct scroll position.