There is an easy way to make a div or other element square or any other shape while still being responsive, using ONLY CSS. I actually stumbled upon this solution myself, and then saw a formal write-up of it by @marcolago here. The solution is actually extremely simple, and you will kick yourself for not figuring it out. This little trick can make developing a responsive website design significantly easier.
The key lies in padding. Padding, whether being used to define top, bottom, left, or right padding, is dependent upon the WIDTH of the containing element when defined in percents. For example, if you say “padding-top: 10%;” what you are actually saying is that the padding on the top should be 10% of the WIDTH of the containing element. So then, if you wish to make an element a responsive square, you simply write this:
|
1 2 3 |
width: 20%; height: 0; padding-bottom: 20%; |
The height needs to be set at zero, so that the entirety of the element’s height is produced from the padding. But with these simple lines of code, you can easily have boxes or other elements that resize gracefully in the browser along with all of your other responsive elements. Happy coding!
If you need any help implementing this, you can ask me on twitter at @brianjonline or email me at brian@pagecrafter.com.
19 Comments on “Maintain Aspect Ratio for HTML Element Using Only CSS in a Responsive Design”
This is amazing; Thank you so much for posting. I was trying without success for hours yesterday to resolve this issue.
Just to add some info. I can get it to work on the initial image but if use hover or after the second image does not seem to respond to the padding etc and stays at 100% size even if the containing box is smaller.
“The key lies in padding. Padding, whether being used to define top, bottom, left, or right padding, is dependent upon the WIDTH of the containing element when defined in percents. For example, if you say “padding-top: 10%;” what you are actually saying is that the padding on the top should be 10% of the WIDTH of the containing element. So then, if you wish to make an element a responsive square, you simply write this:
1 width: 20%;
2 height: 0;
3 padding-bottom: 20%;”
Shouldn’t that be padding-bottom: 100% to get 100% of the WIDTH if your explanation is accurate?
Sure, if you want a square that’s the full size of its parent. In my example it’s just a smaller square; it happens to be 20% of its parent.
If you wanted it to be 100% you would also have to specify
width:100%;as well!Simple yet an awesome way to implement the image sprites.. thanks in advance.. will try it out.. and hope it works
🙂 😉
Give this man a cookie!
You are my new hero
I love this so much. Thank you.
Pingback: Maintain Element Aspect Ratio Using CSS Only | Cameron Alcorn
Thanks for posting this! It’s very useful info!
Amazing, thank you so much for that elegant solution
Yeah, I’ve been using this useful technique for a while. I’ve noticed though that if you want to set a max-height on the element it doesn’t work though.
If you set a max-width to the parent element, the resizing element will have a limit to get bigger in width… the “height (padding)” is based on width, so it will also be limited. You can play with the max-width of the parent element to get what you want.
(Don’t apply the max-width to the responsive element.. do it to the parent)
PS. I hope my english make sense hahaha
I’m not gay, but i want to kiss. I never thought padding could work for this.
Pingback: Responsive, Centered Square Div that Resizes Based on Height in Landscape - CSS
Hey Brian,
Very cool article and has helped me with some responsive issues. The Only thing is that I cannot get this example to work consistently in all browsers, it seems the vertical positioning is different only in Safari, than any other browser. Here is a fiddle: http://jsfiddle.net/fsR6A/
I would be glad if you have any ideas !
Charles
Thanks for your feedback, Charles! I tested it out on my iPad, and I didn’t have any trouble with it.
As for vertical positioning, that is really beyond the scope of this article. I know you are using absolute positioning for your child Div, which sort of defeats the purpose of doing responsive design. Additionally, margins with positioned elements (absolute OR relative) behave rather unpredictably, and I’ve seen this cause issues in Safari before.
If you MUST keep that positioning, instead of using margins to place the element, use “Top” and “Left”. For example,
.B {
left: 2%;
top:5%;
padding-bottom:2%;
width:7.4%;
background-color: red;
position:absolute;
}
That way it will get positioned properly and should display on all browsers.
Pingback: Responsive, Centered Square Div that Resizes Based on Height in Landscape – CSS – PageCrafter
Pingback: How to Use Responsive Background Image Sprites – CSS Tutorial – PageCrafter