CSS: Fixed Aspect Ratio

By Xah Lee. Date: . Last updated: .

Here's how to use CSS to set a fixed aspect ratio, while the width is a percentage of the window width.

The box above has aspect ratio of 4/3, while the width is 30% of window size.

Try resize window to see it change.

Here's the CSS

.e2ca6f {
width: 30vw;
height: calc( 30vw * 0.75);
border: solid thick red;
}

The vw is a CSS unit that means 1 percent of viewport width.

[see CSS: Units]

calc is used to compute 75 percent of 30vw

[see CSS: calc]

Size of Element/Viewport/Window

  1. CSS: Fixed Aspect Ratio
  2. JS: Find element Size
  3. JS: Find Window Size

CSS Misc Examples

  1. Display Table on Small Screen
  2. Fixed Aspect Ratio
  3. Add Icon to Links
  4. Progress Bar Example
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. SVG
  5. Blog