CSS: Fixed Aspect Ratio

Problem Description

• You want a box of fixed aspect ratio of 4:3.
• However, you want the box size to be larger when the screen is larger.

How to specify this in CSS?

Solution

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〕