Aspect Ratio CSS Property is Fantastic (short read)

September 14th, 2021

Aspect Ratio is a fantastic new CSS property now supported by all modern browsers (learn more).

Aspect Ratio

It's a new CSS property now supported by all major browsers. It allows you to specify the size of an element based on the relationship between its width and height. For square elements, the aspect ratio is 1:1, 100px width, 100px height. For most screens (smart phones, tv, point and shoot photography) 9:16 or 3:4 is the most commonly used size. This is very helpful in creating responsive layouts, because regardless of screen size we can set our elements to scale in proportion to the size available.

As your element grows or shrinks to fit any browser size, it will maintain its aspect ratio.

It's handy when you have an element which should grow and shrink based on the size of the screen, but should always have the same height to width ratio.

For example, an image won't get stretched out and distorted if the screen size changes.

I recently used this while building a presentation application.

Creating a presentation mode

I was building a presentation application. Each slide in the presentation contains images, text, etc. In presentation mode, it needs to be full screen and display all content in the correct location and size for any device: giant lecture hall screen or tiny little phone. The precise number of pixels each item occupies isn't important. The key is that each item is proportionately correct. The titles should be the correct amount larger than the body text, and images must be in right spot, not stretched or squished. This is a perfect use case for aspect ratio:

an element needs to resize proportionately based on the available space

That's the key here - the ratio must be maintained in order for the internal elements to be correctly positioned or sized.

So, it was very important that the aspect ratio be preserved on all screen sizes in my application - because the location and size of all the content - images, text, videos, interactive elements - had to be placed and sized based on a 9:16 scale.

Create the full screen - Aspect Ratio to the Rescue!

Starting off with a simple template, I made a div element with width set to 100vw, which equals 100% of the viewer width, and aspect-ratio 16 / 9 . 

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <div id="container"></div>
</body>

</html>
HTML
/* styles.css */
#container {
  background-color: red;
  width: 100vw;
  aspect-ratio: 16 / 9;
}
CSS

Now, we have a simple div element that is always full width and maintains it's aspect ratio.

Voila! Full Screen Presentation Mode enabled!

What about all the content in the presentation?

...more coming soon on dynamic sizing and positioning!

© 2025 Rebecca Page