In order to maintain the aspect ratio of a div with CSS create flexible elements that keep their aspect ratio (4:3, 16:9, etc.) when resize the browser window.
What is aspect ratio?
The aspect ratio of an element describes the proportional relationship between its width and height. Two common video aspect ratios are 4:3 and 16:9.
To maintain the aspect ratio of the div add a percentage value for padding-top. Different aspect ratio have different percentage values. Some of them are shown below:
aspect ratio | padding-top value
--------------|----------------------
1:1 | 100%
16:9 | 56.25%
4:3 | 75%
3:2 | 66.66%
8:5 | 62.5%
Syntax
elemenet {
padding-top: %value;
}
The Math of Any Possible Aspect Ratio
So how do we figure out the padding-top for our 1127.34 × 591.44 SVG above?
padding-top: calc(591.44 / 1127.34 * 100%);
