How to style a div to be a responsive square?

css layout responsive-design aspect-ratio
danijar picture danijar · Sep 28, 2013 · Viewed 272.7k times · Source

I want my div to adapt its height to always equal its width. The width is percental. When the parent's width decreases, the box should decrease by keeping its aspect ratio.

How to do this is CSS?

Answer

rahulbehl picture rahulbehl · Sep 28, 2013

Works on almost all browsers.

You can try giving padding-bottom as a percentage.

<div style="height:0;width:20%;padding-bottom:20%;background-color:red">
<div>
Content goes here
</div>
</div>

The outer div is making a square and inner div contains the content. This solution worked for me many times.

Here's a jsfiddle

Related questions

safari rounding down on subpixel calculations

i have a container that takes up 829px on a row, and has a background-image of the same size. i have a div within that container that calculates its width based on the 829px container. on safari, the divs width …

Read More
How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

Imagine a simple unsorted list with some <li> items. Now, I have defined the bullets to be square shaped via list-style:square; However, if I set the color of the <li> items with color: #F00; then …

Read More
CSS - Expand float child DIV height to parent's height

I have the page structure as: <div class="parent"> <div class="child-left floatLeft"> </div> <div class="child-right floatLeft"> </div> </div> Now, the child-left DIV will have more content, …

Read More