CSS: Fixed Aspect Ratio

By Xah Lee. Date: .

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

.e1_2ca6f {
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
Liket it? 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. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog