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%;
}
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%;
}
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%;
}12 thoughts on “Responsive elements that retain their aspect ratio”
Comments are closed.
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!
Amazing how for so long developers can miss something so simple….excellent find!
Interesting
Could work well with this: http://adaptive-images.com/
This is a good basis for the kind of layouts we felt comfortable with back in the good ol’ flash days.
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?
As the article below shows, this technique can be used to scale elements that do not have intrinsic-ratio:
http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
Good post! Solved my problem. Thank you.
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?
thanks!
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.
Cheers
Worked just as i wished to.
Thanks a lot…
Thank you very much!
Nicely done and so simple. Thank you.
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.