Aspect Ratio & Responsive Image Srcset Sizer

Calculate proportional media dimensions, CSS aspect-ratio properties, and retina 1x/2x/3x srcset tags.

Presets:

1. Ratio & Dimensions

Ratio Width (W):

Ratio Height (H):

Target Width (px):

Calculated Height (px):

Decimal Aspect Ratio: 1.7778 (e.g. aspect-ratio: 16 / 9)

Visual Proportions Preview

16:91920 × 1080px

CSS Aspect Ratio Rule

/* Modern CSS Aspect Ratio */
.responsive-media {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 1920px;
  height: auto;
  object-fit: cover;
}

Responsive HTML <img srcset>

<!-- Responsive HTML5 Image with Retina 1x, 2x, 3x srcset -->
<img
  src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800"
  srcset="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800 1920w, https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&dpr=2 3840w, https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&dpr=3 5760w"
  sizes="(max-width: 768px) 100vw, 1920px"
  width="1920"
  height="1080"
  style="aspect-ratio: 16 / 9; object-fit: cover;"
  alt="Responsive optimized media"
  loading="lazy"
/>

Preventing Layout Shifts with CSS `aspect-ratio`

When web pages load images or video embeds without predetermined height dimensions, the browser dynamically reflows the page as media assets finish downloading. This causes jarring Cumulative Layout Shifts (CLS), damaging Google Core Web Vitals scores.

Modern Aspect Ratio Standards

16:9 (1.7778): The international widescreen video standard for YouTube, Vimeo, and modern desktop video players.
9:16 (0.5625): Vertical full-screen smartphone orientation used by TikTok, Instagram Reels, and YouTube Shorts.
1:1 (Square): Standard for profile avatars, product thumbnail grids, and social post cards.
21:9 (2.3333): Anamorphic ultrawide aspect ratio for cinematic trailers and panoramic banner headers.

Aspect Ratio & Responsive Image Srcset Sizer

Preventing Layout Shifts with CSS aspect-ratio

Modern Aspect Ratio Standards

Preventing Layout Shifts with CSS `aspect-ratio`