Use CSS (and maybe JavaScript) to make an element be square (or maintain a specific aspect ratio)

Question

I have a div that I want to have the following characteristics:

Width = 50% of its parent element
Height equal to whatever it needs to be in order to maintain a certain aspect ratio.

I need to use percentages because the object will resize left-right when the browser is resized. I want the object to be resized top-bottom to ensure the object maintains the same aspect ratio.

I don't think there's any way to use pure CSS to do this, but does anyone know of a way? Alternatively, is there an easy JavaScript way to do this? (JQuery is fine.)

Possible duplicate: http://stackoverflow.com/questions/1495407/css-a-way-to-maintain-aspect-ratio-when-resizing-a-div — Web_Designer, Feb 25 '13 at 04:19

score 15 · Accepted Answer · answered Apr 22 '10 at 05:34

I figured out how to do this without js, though you need to use a transparent image.

Set up a html structure like:

<div class="rect_container"><img class="rect_image" src="rect_image.png"/>
 <div class="rect">Your favorite content here</div>
</div>

Use a AxB transparent png for rect_image where AxB is the aspect ratio.

Meanwhile set up a stylesheet like:

.rect_container {width: 50%; position: relative;}
.rect_image {width: 100%; display: block;}
.rect {width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;}

The important thing here is taking advantage of the fact that images maintain their aspect ratio when resized in one direction. Meanwhile, we need a useable div, so we make the image display as block, wrap it in a div, and put an absolutely positioned div inside that. I distilled this code from something more complicated I actually tested. Works like a charm.

Pretty genius. I love it when JS isn't needed. – Jesse Dec 18 '13 at 17:38 — Jesse, Dec 18 '13 at 17:38

score 4 · Answer 2 · edited Feb 13 '13 at 17:28

Here's a pure CSS version with no img tag:

<div class="apple_container"><div class="apple_icon"></div></div>

SCSS (include Compass to render the background-size):

.apple_container {
  width: 50%;
}
.apple_icon {
  padding-bottom: 100%;
  background-image: url(/images/apple.png);
  background-repeat: no-repeat;
  @include background-size(contain);
  background-position: center center;
}

CSS generated from the above:

.apple_container {
  width: 50%;
}
.apple_icon {
  padding-bottom: 100%;
  background-image: url(/images/apple.png);
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  background-position: center center;
}

Results in a square element with a background image centered and fitted within it. This is good for responsive elements that you want to resize dependent on the user's device.

score 3 · Answer 3 · answered Jan 14 '10 at 17:27

3

jQuery sounds pretty easy. Set the 50% width in the CSS, and then the following:

function onResize() {
    var el = $('#element');
    el.height(el.width());
}
$(window).resize(onResize);
$(document).ready(onResize);

answered Jan 14 '10 at 17:27

Matchu

83,922
18
153
160

Still holding out for some clever, pure CSS answer but otherwise I'll mark this as accepted. – David Pfeffer Jan 14 '10 at 17:28
I think for images you can do height: auto, but only for images. – Matchu Jan 14 '10 at 17:30
Bummer. I need to do this for a div containing a flash element. – David Pfeffer Jan 14 '10 at 18:14

score 0 · Answer 4 · answered Jan 14 '10 at 17:26

0

Here you go: Detecting a browser resize using JQuery.

answered Jan 14 '10 at 17:26

Rob Grant

7,239
4
41
61

Use CSS (and maybe JavaScript) to make an element be square (or maintain a specific aspect ratio)

4 Answers4

Linked

Related