CSS Aspect Ratio

CSS Aspect Ratio

The CSS aspect-ratio property defines a preferred proportional relationship between an element's width and height, making it easier to create responsive boxes, images, videos, cards, and other layout components.

When one dimension is automatic, the browser can use the specified aspect ratio to calculate the other dimension while the element changes size.

How aspect-ratio Works

The aspect-ratio property specifies a preferred width-to-height ratio for an element.

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

The ratio 16 / 9 means that for every 16 units of width, the element has a preferred height of 9 units. As the width changes, the browser can calculate the height needed to preserve that proportion.

The property participates in the CSS sizing process. It does not simply force an element to a particular fixed width or height.

Aspect Ratio Values

An aspect ratio is commonly written as two positive numbers separated by a slash.

.wide {
  aspect-ratio: 16 / 9;
}
.square {
  aspect-ratio: 1 / 1;
}
.portrait {
  aspect-ratio: 3 / 4;
}

A single number can also represent a ratio relative to 1.

.box {
  aspect-ratio: 1.5;
}

This represents the same proportion as 1.5 / 1.

The initial value is auto. Replaced elements such as images can use their natural or intrinsic aspect ratio when one is available.

Aspect Ratio with Width and Height

The aspect-ratio property is most useful when at least one of the element's dimensions is automatic.

.box {
  width: 300px;
  aspect-ratio: 3 / 2;
}

With a width of 300 pixels and an automatic height, the preferred 3:2 ratio produces a height of 200 pixels.

If both width and height are explicitly specified, those dimensions normally determine the size instead of the preferred aspect ratio.

.box {
  width: 300px;
  height: 300px;
  aspect-ratio: 16 / 9;
}

Here the element remains 300 by 300 pixels because neither dimension is automatic.

Responsive Boxes

The aspect-ratio property makes it easy to create boxes that maintain their proportions as their width changes.

.responsive-box {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16 / 9;
}

The box can shrink with its container while maintaining the same width-to-height relationship.

This avoids older techniques that relied on percentage padding to create responsive aspect-ratio boxes.

Aspect Ratio with Images

Images are replaced elements and normally have an intrinsic aspect ratio based on their natural dimensions.

img {
  max-width: 100%;
  height: auto;
}

This common responsive image pattern preserves the image's intrinsic proportions without requiring an explicit aspect-ratio.

You can specify an aspect ratio when an image needs to fit a particular layout shape.

.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

The image box uses a 4:3 ratio, while object-fit: cover controls how the image content fills that box.

Aspect Ratio with object-fit

The aspect-ratio and object-fit properties are often used together for images and videos.

.thumbnail {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

The aspect-ratio property establishes the preferred shape of the element, while object-fit: cover scales the replaced content to cover its box. Some content may be cropped when its intrinsic ratio differs from the box.

Using object-fit: contain instead keeps all of the content visible, but empty space may remain within the box.

Videos and Iframes

The aspect-ratio property can maintain a responsive shape for video elements and embedded content.

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

The same approach can be used for an iframe when a particular display ratio is required.

.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

As the available width changes, the automatic height can adjust to preserve the preferred ratio.

Aspect Ratio with Min and Max Sizing

Minimum and maximum sizing constraints still participate in determining an element's final size.

.box {
  width: 80%;
  max-width: 600px;
  aspect-ratio: 16 / 9;
}

The box can use 80 percent of the available width until it reaches the 600-pixel maximum. Its automatic height follows the preferred aspect ratio.

Properties such as min-width, max-width, min-height, and max-height can constrain the final dimensions, so an aspect ratio should be considered part of the sizing process rather than an absolute size requirement.

Common Aspect Ratios

Different ratios are useful for different types of visual content and components.

The appropriate ratio depends on the content and design rather than on a required CSS standard.

CSS Aspect Ratio Example

The following example gives three responsive boxes different aspect ratios.

.square {
  aspect-ratio: 1 / 1;
}
.landscape {
  aspect-ratio: 4 / 3;
}
.widescreen {
  aspect-ratio: 16 / 9;
}

Open the example in the editor and change any of the ratio values. The boxes keep their responsive widths while their heights adjust according to the new proportions.

Drag the divider between the code and result panes to change the preview width and watch each box maintain its specified aspect ratio.