Changes in browser size can create distortions of elements and affect the way content within is displayed. It is therefore important at times to maintain the aspect ratio of a div container. This can be done with CSS3 by ensuring that the change in height of a div container is in proportion to the change in width. It can also be done in JavaScript although the CSS3 route maybe preferable.
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 Ratio
The 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.
