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

Try resize window to see it change.

Here's 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: Units]

calc is used to compute 75 percent of 25vw

[see CSS: calc]

JS in Depth
XAH  BUY NOW

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc