Aspect Ratio Calculator — Responsive Design Dimensions

Calculate missing dimensions from aspect ratios with our Aspect Ratio Calculator. Generate CSS code for responsive media with modern aspect-ratio property or legacy padding-bottom technique. Perfect for responsive images, video embeds, and layout design with common presets like 16:9, 4:3, 21:9, and more.

Px to Rem Converter Convert pixels to rem, em and percent units for responsive CSS. PX to REM calculator with custom base font size, quick values and a conversion table.
Data Converter Convert between JSON, XML, YAML and CSV formats and Unix timestamps. Format conversion with clear error messages and customizable output formatting.
SRI Generator Generate Subresource Integrity (SRI) hashes for CDN resources. SHA-256, SHA-384, SHA-512 support with ready-to-use script and link HTML tags.
Base64 Encoder Base64 encoder and decoder for text and files with drag & drop support. URL-safe encoding and live preview for web development and APIs.

Features

Calculate missing width or height from aspect ratio
Common ratio presets (16:9, 4:3, 21:9, 1:1, etc.)
CSS padding-bottom trick generator
Multiple ratio formats (ratio, decimal, percentage)
Responsive image size calculator
Real-time calculation
100% client-side processing

Common Aspect Ratios

16:9 — Standard HD video, YouTube, modern displays
4:3 — Classic TV, older monitors
21:9 — Ultrawide monitors, cinematic
1:1 — Square (Instagram posts)
9:16 — Vertical video (Instagram Stories, TikTok)

Common Use Cases

Responsive Images: Maintain aspect ratio while scaling images
Video Embeds: Calculate iframe dimensions for YouTube, Vimeo
CSS Aspect Ratio: Generate padding-bottom trick for older browsers
Image Resizing: Calculate crop or resize dimensions
Layout Design: Plan responsive grid layouts

CSS Aspect Ratio Techniques

Modern approach (CSS aspect-ratio):

.container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Legacy approach (padding-bottom trick):

.container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 = 9/16 = 56.25% */
}

.container > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Useful Resources

Wikipedia: Aspect Ratio Beginner-friendly introduction to aspect ratios in images and video

MDN: CSS aspect-ratio Property Modern CSS property for maintaining aspect ratios

Smashing Magazine: Aspect Ratio in CSS Comprehensive guide to maintaining aspect ratios in modern CSS

W3C CSS Box Sizing Module Official specification for CSS aspect-ratio

New Aspect-Ratio CSS Property Google web.dev guide to modern aspect ratio handling