Aspect Ratio

Calculate dimensions & generate CSS instantly.

1 Original Ratio

Width (W1)

Height (H1)

Common Presets

2 New Dimensions

New Width (W2)

New Height (H2)

Visual & Code

Preview

16:9

CSS Implementation

Modern

aspect-ratio property

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

Legacy

padding-top hack

.aspect-ratio-box {
  width: 100%;
  padding-top: 56.2500%;
  position: relative;
}

.aspect-ratio-box > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

What is an Aspect Ratio?

An aspect ratio describes the proportional relationship between the width and height of an image, screen, or container. It is commonly expressed as two numbers separated by a colon, like 16:9.

Calculating Dimensions

If you know the original aspect ratio (e.g., 16:9) and you want to scale the image to fit a specific width (e.g., 800px), you can use this tool to calculate the exact height required to maintain the original proportions (450px) to avoid stretching or distorting the image.

CSS Aspect Ratios

Historically, web developers used the "padding-top hack" to maintain aspect ratios for fluid containers (especially for YouTube video embeds). The padding percentage was calculated as (Height / Width) * 100.

Today, modern browsers support the native aspect-ratio CSS property, making it much easier to lock an element's proportions directly in CSS.

Related Guides

Deepen your understanding with our expert articles.

The Ultimate Guide to Meta Tags for SEORead guide →

Aspect Ratio Calculator