CSS aspect-ratio property

CSS aspect-ratio property - the most awaited feature is now shipped in the new Chrome 88 along with other major updates.

With aspect ratio, we can define an element's dimension proportionally. 

A quick example to make a square box with aspect-ratio:

.sizing-1x1 {
  aspect-ratio: 1/1;
  background: yellow;
}

Another example:

.sizing-16x9 {
  aspect-ratio: 16/9; /* a rectangle */
  background: yellow;
}

Cool. But there are few things you must know -

• If height and width are defined, the aspect-ratio will be ignored.
• If either height or width is defined then the other is calculated from the aspect ratio.

We can use @supports not for other browsers if the aspect ratio is not supported.

@supports not (aspect-ratio: 1 / 1) {
 .sizing-1x1 {
    width: 200px;
    height: 200px;
  } 
}

Check this CodePen demo by Una Kravets.

Read New in Chrome 88

Leave a comment