Maintain Aspect Ratio for HTML Element Using Only CSS in a Responsive Design

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:

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@brianjohnsondesign.com.

About Brian Johnson

Brian Johnson is a website developer and designer living in Lakeville, Minnesota with a passion for code and WordPress. He spends his days building WordPress websites for small businesses, developing new code with the online community, and living life.

17 Comments on “Maintain Aspect Ratio for HTML Element Using Only CSS in a Responsive Design”

  1. “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?

    1. 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!

  2. Simple yet an awesome way to implement the image sprites.. thanks in advance.. will try it out.. and hope it works
    ๐Ÿ™‚ ๐Ÿ˜‰

  3. Pingback: Maintain Element Aspect Ratio Using CSS Only | Cameron Alcorn

  4. 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.

    1. 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

  5. Pingback: Responsive, Centered Square Div that Resizes Based on Height in Landscape - CSS

  6. 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

    1. 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.

  7. Pingback: Responsive, Centered Square Div that Resizes Based on Height in Landscape – CSS – Brian Johnson's Design Blog

  8. Pingback: How to Use Responsive Background Image Sprites – CSS Tutorial – Brian Johnson's Design Blog

Leave a Reply

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