Responsive elements that retain their aspect ratio

Here is a quick tip for creating responsive elements that retain their aspect ratio as they scale.

The problem

In a fixed width layout it is simple to specify both the width and the height of an element:

.rect {
    width: 800px;
    height: 400px;

When creating a responsive layout things get trickier, since (to the best of my knowledge) it isn’t possible to specify a percentage based height that is relative to an element’s width. For example the following CSS rule won’t have the desired result, since the height value will be ignored:

.rect {
    width: 100%;
    height: 50%;

Broken aspect ratio

A solution

However, when we specify a padding-bottom value for the same element, the padding measurement is calculated relative to the element’s width:

.rect {
    width: 100%;
    height: 0;
    padding-bottom: 50%;

Correct aspect ratio

View a demo

You will notice that I have set the element’s height property to 0, to ensure that the height of any child elements will not be added to the padding value when the visible height is calculated.

A note about child elements

If you also want to specify percentage based heights for a child element, you will need to assign an absolute or relative position value to both the parent and the child:

.rect {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    .rect p {
        position: absolute;
        margin: 0;
        height: 100%;

View a demo

12 thoughts on “Responsive elements that retain their aspect ratio

  1. Good post.
    The only real downside which I think should be mentioned is that this wont respond to the actual change in height. So should someone only resize the height of the browser window you don’t see the element change in size. However as this post title indicates resizing the width WILL maintain the aspect ratio.

    Nice job!

  2. Adam says:

    Amazing how for so long developers can miss something so simple….excellent find!

  3. Interesting
    Could work well with this:

    This is a good basis for the kind of layouts we felt comfortable with back in the good ol’ flash days.

  4. James Monro says:

    Would this solution produce a true 2:1 Width:Heigth ratio? As isn’t the actual height of the block is going be the 50% plus the height of the paragraph in the element?

  5. As the article below shows, this technique can be used to scale elements that do not have intrinsic-ratio:

  6. Anders Offenberg says:

    Good post! Solved my problem. Thank you.

  7. Bernat says:

    Great, but what if I want to do the opposite, that a div fills the top of the window and keep the ratio of the width?


  8. Denis Ivanov says:

    Awesome! Totally works.

    Building a responsive hero image and this is perfect! Since the only thing that matters if the background, set it to not repeat, set background size to ‘cover’ figure out the aspect ratio, profit.


  9. Surya Pops says:

    Worked just as i wished to.
    Thanks a lot…

  10. Cyan says:

    Thank you very much!

  11. Camilo says:

    Nicely done and so simple. Thank you.

  12. Alex Saru says:

    Really, the padding-bottom percentage together with the zero height it’s a fantastic (and beyond) work-around for the “background-size: 100% auto” in a responsive environment.

    Many thanks for this clever solution.

Comments are closed.