CSS 'aspect-ratio' Property Explained

The CSS 'aspect-ratio' property sets a preferred aspect ratio for the box, which is the ratio between its width and height. When at least one of the box's dimensions is automatic (for example width: 100% with height: auto), the browser uses this ratio to work out the automatic size, so the box keeps its shape as the layout changes, which is useful for responsive layouts. The ratio is only a preference: if both width and height are set to definite values, aspect-ratio has no effect and the explicit sizes win. Content that does not fit can also change the result, because content larger than the preferred height can make the box grow. MDN's guide suggests setting min-height: 0 and an overflow value other than visible if the content must not grow beyond the preferred height.

.video-frame {
  width: 100%;       /* definite width */
  height: auto;      /* automatic height, so the ratio is used */
  aspect-ratio: 16 / 9;
}

CSS 'aspect-ratio' Property Example

See the Pen CSS 'aspect-ratio' Property by Webzstore (@webzstore) on CodePen.

The 'aspect-ratio' property offers a simple yet powerful way to control the scaling of elements, ensuring content maintains its intended proportion across different viewing contexts. This is especially useful in responsive design, where maintaining the correct aspect ratios of elements can significantly enhance a website or application's visual integrity and user experience.

Browser Support For 'aspect-ratio' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for aspect-ratio for the full compatibility details, including mobile browsers.

CSS Syntax of the 'aspect-ratio' Property

aspect-ratio: auto || <ratio>;
/* "||" means one or both keywords, in either order.
   <ratio> is <width> / <height>, for example 16 / 9 */

Usage of the 'aspect-ratio' Property

Use the 'aspect-ratio' property when you need an element whose size is partly automatic (for example a known width and an automatic height) to keep a specific width-to-height ratio. If both dimensions are explicitly set, the ratio is ignored. This is particularly useful for images, videos, and other media content that should retain their proportions to avoid distortion. It's also helpful in responsive design, where you want elements to scale correctly on different devices.

Property Values of the 'aspect-ratio' Property

• Auto: This is the default value. Replaced elements such as images use their intrinsic aspect ratio; for other elements the box has no preferred aspect ratio.
• <width> / <height>: Defines the preferred aspect ratio with a width-to-height ratio. '<width>' and '<height>' can be any non-negative number representing the width ratio relative to height. If the slash and height are omitted, the height defaults to 1, and the ratio can be combined with auto (for example auto 3 / 2).