CSS: Fixed Aspect Ratio
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]