It is important to decide the aspect ratio is required and translate this into a percentage value. Here are some of the more common aspect ratios with the corresponding percentage value that will be used.
- 16:9 = 56.25%
- 4:3 = 75%
- 3:2 = 66.66%
- 8:5 = 62.5%
CSS3 Code for DIV Aspect RatioThe CSS3 code to maintain a 3:2 aspect ratio is as follows: The background has been set to red just for illustration purposes.
However, the content within the content within the div can stretch it and this can be prevented by adding a child with the absolute position set and the stretched to the edges of the wrapper. The CSS3 code to do this is as follows:
Why set the padding bottom and not the height?Alternate Option There is another way to approach the same problem of maintaining the aspect ratio. In this case the div aspect ratio can be set by the viewport width or the viewport height. The following multipliers would be used to calculate the viewport units.
- 1:1 aspect ratio then multiply viewport units by 1
- 1:3 aspect ratio then multiply viewport units by 3
- 4:3 aspect ratio then multiply viewport units by 0.75
- 16:9 aspect ratio then multiply viewport units by 0.5625
Here is the CSS3 code for maintaining the aspect ratio according to the viewport width or viewport height. The background has been set to red just for illustration purposes.
This may be a neater option and the preferred route, especially since viewport units are supported by most browsers.