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;
}

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, 
        initial-scale=1">
        <style>
            .container {
                background-color: green;
                position: relative;
                width: 100%;
                padding-top: 56.25%; /* 16:9 Aspect Ratio */
            }
  
            .text {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                text-align: center;
                font-size: 25px;
                color: white;
            }
            .example {
                background: white;
                color: green;
                font-weight:bold;
                font-size: 40px;
                padding-bottom: 20px;
            }
        </style>
        </head>
    <body>
        <div class="container"
            <div class="text">
                <div class = "example">GeeksforGeeks</div>
                <p>A Computer Science portal for geeks. It 
                contains well written, well thought and well
                explained computer science and programming 
                articles, quizzes etc. Also it contains several
                coding questions to practice and develop your 
                skills in programming.</p>
            </div
        </div>
    </body>
</html>                                

chevron_right


Output:
aspect

The output of above example is set to Aspect Ratio of 16:9. Resize the window to see the effect. Also change the corresponding values of the aspect ratio to see the desired changes in the browser window.



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.