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
Like it? Help me by telling 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. JS Object Ref
  5. DOM Scripting
  6. SVG
  7. Blog