CSS: Fixed Aspect Ratio

By Xah Lee. Date: . Last updated: .

Here is 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 25% of window size.

Try resize window to see it change.

Here is the CSS

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

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

[see CSS: Length Units]

calc is used to compute 75 percent of 25vw

[see CSS: calc]