CSS aspect-ratio Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The CSS aspect-ratio property is a modern tool that allows developers to define the proportional relationship between an element’s width and height. This ratio determines how an element scales when its size changes, ensuring that the element maintains a consistent shape regardless of the viewport or container dimensions. Unlike traditional approaches where developers often relied on padding tricks or JavaScript calculations to preserve dimensions, aspect-ratio provides a declarative, native CSS solution that is both simpler and more reliable. By specifying a ratio, such as 16/9 for a widescreen element or 1/1 for a square, the browser automatically adjusts the missing dimension when one dimension is explicitly defined.

One of the most powerful aspects of aspect-ratio is how it interacts with other sizing properties like width and height. When either width or height is defined, the browser uses the aspect ratio to calculate the unspecified dimension. For example, if you set the width of an element to 300px and the aspect ratio to 16/9, the height is automatically computed as 168.75px, maintaining the desired proportion. This automatic calculation is particularly useful for responsive design, where elements need to adapt fluidly to different screen sizes while preserving their intended appearance.

Additionally, aspect-ratio is beneficial for images, videos, and layout containers, helping prevent layout shifts and visual inconsistencies. When combined with properties like object-fit, it can ensure media retains its intended proportions within flexible containers. Moreover, it simplifies the creation of grid and flex layouts by letting elements naturally maintain their shape without extra wrappers or complex CSS rules. Overall, aspect-ratio is a versatile property that modernizes layout control, providing developers with a straightforward, CSS-only approach to maintain visual harmony across various devices and contexts.

Definition

Initial value: auto
Applies to: all elements except inline boxes and internal ruby or table boxes
Inherited: no
Computed value: as specified
Animatable: by computed value type
JavaScript syntax: object.style.aspectRatio

Interactive Demo

aspect-ratio: auto;

aspect-ratio: 1 / 1;

aspect-ratio: 16 / 9;

aspect-ratio: 0.5;

Syntax

aspect-ratio: auto | <ratio>

Values

autoThe element does not have a preferred aspect ratio and the browser sets it automatically based on the width and height of the element.
<ratio>The ratio is written as 16/9, here the first number is the width and the second number is the height. If any value is not specified, then it is considered equal to 1. Also, some ratios can be written in one number. For example, 2/1 can be written as 0.5, this will give the same result.

Example

HTML

<div class="container">

  <div class="card card-16-9">

    <div class="label">16:9</div>

  </div>

  <div class="card card-1-1">

    <div class="label">1:1</div>

  </div>

  <div class="card card-4-3">

    <div class="label">4:3</div>

  </div>

  <div class="card img-card">

    <img src="https://placehold.co/800x533" alt="Placeholder image">

    <div class="label">Image with aspect-ratio</div>

  </div>

</div>

CSS

/* Basic reset */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f4f6f8;
  padding: 2rem;
  color: #111827;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  max-width: 1000px;
  margin: 0 auto;
}

.card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
  overflow: hidden;
}

/* Different aspect ratios */
.card-16-9 {
  aspect-ratio: 16 / 9;
}

.card-1-1 {
  aspect-ratio: 1 / 1;
}

.card-4-3 {
  aspect-ratio: 4 / 3;
}

/* Example with an image kept to the container's ratio */
.img-card {
  aspect-ratio: 3 / 2;
}

.img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Label */
.label {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  background: rgba(0,0,0,0.45);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #fff;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS aspect-ratio property. Hover over a browser icon to see the version that first introduced support for this CSS property.