STYLE SWITCHER

Maintain the aspect ratio of a div with CSS

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%);

Recent Article

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Keep your skills sharp, get informed.

    Subscribe to our mailing list and get interesting stuff and updates to your email inbox