2

I have a div that I want to set to 90% of its parent container's width, and I want its height to be set so as to achieve a specific aspect ratio, say 3:1.

.mydiv {
  width: 90%
  height: 30%(of-width);
}

Is there any way to do this that does not involve JavaScript?

smholloway
  • 589
  • 7
  • 14
epeleg
  • 10,347
  • 17
  • 101
  • 151
  • I don't think so that you can only do this by css but maybe I'm wrong. – mas-designs Jan 10 '12 at 14:53
  • You're going to need to involve javascript to get the pixel width of the div and set the height to 30% of it's width. CSS doesn't include the required mathematics to perform this equation. – Brian Ray Jan 10 '12 at 14:56
  • I though that maybe there is some aspect-ratio css property that can be set. – epeleg Jan 10 '12 at 19:00

3 Answers3

6

Chiming in long after the answer was posted - you can set an element's aspect ratio with plain CSS, without using any aspect-ratio fanciness. It relies on the fact that padding given as a percentage takes its measurement from the width of the parent element, not the height as you might expect. We can take advantage of this, like so:

.aspect-box {
   width: 90%;
   height: 0;
   padding-top: 27%; /* because we want a ratio of 100:30 and the width 
                        is 90% of the parent width, We need the height to be
                        30% of this 90%, since we're referencing the parent
                        element's width, not this element. */
}

So, you set the height to 0, and the top-padding to a percentage, and you get a box with a fixed-aspect ratio. Problem is, you need another little tweak to put stuff inside that box. Change the previous code to something like:

.aspect-box {
   position: relative;
   width: 90%;
   height: 0;
   padding-top: 27%; /* This is 90% of 30%, since we're referencing the parent element, not this element. */
}

.aspect-box .liner {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

Put a <div class="liner"> inside your aspect-box, and then place whatever content you want inside that.

Ben Hull
  • 7,524
  • 3
  • 36
  • 56
  • Interesting solution. Is this padding thing a bug? or is it intentional? – epeleg Apr 11 '13 at 11:27
  • Determining the padding height based on width is what the standard says to do. *Why* it says to do that, I have no idea - it seems counterintuitive to me, even if there is a handy use for it. – Ben Hull Aug 25 '13 at 13:27
1

If your container div has a fixed width, then your 90% width div has as well a fixed width. Look which is this width (calculate or use a tool like firebug) and then calculate the 3:1 aspect ratio and apply a height in pixels.

If your container div hasn't a fixed width, then the 90% is as well variable. So the only way you have to manage with dynamic values is to use javascript.

UPDATE

There is a aspect-ratio property but it's not a standard one. I haven't tested it, but it should work with webkit browsers. Here it's a link talking about this property:

http://www.xanthir.com/blog/b4810

If you really want to do this cross-browser, there are two more options:

You can use the workaround explained in following link. It's not very clean because it uses an image, but its author says it works for Firefox 3.5, Safari 4 and Internet Explorer 7 & 8. The link:

http://lab.veille.jp/aspectratio/

Another ugly for this case option (a lot of code) would be using CSS3 media-queries. You should look which is the width of your div for different windows width, calculate the aspect ratio in each case and apply it to the height. The more media-queries you define, smoother it will be.

@media only screen and (max-width:900px){
  div {
    width: /*Calculate your width*/
    height: /*Calculate your aspect ratio*/
  }
}

/*50px gap... if you decrease the gap it will be smoother*/

@media only screen and (max-width:850px){
  div {
    width: /*Calculate your width*/
    height: /*Calculate your aspect ratio*/
  }
}

/*And more, and more... till you rich maybe a setted min-width*/
Waiting for Dev...
  • 12,629
  • 5
  • 47
  • 57
  • If it had a fixed with I would not have asked the Q with percentages. I am looking at targeting different dimensions - I though that was the main idea of using %'s. – epeleg Jan 10 '12 at 19:02
  • I told you both options because I've seen a lot of people fixing a width and then setting a children width with a fluid dimension. – Waiting for Dev... Jan 10 '12 at 20:36
  • Yes, the main idea of using %'s is targeting different resolutions. It's a problem that in CSS vertical and horizontal dimensions doesn't talk too much to each other. I updated my answer with some possibly solutions. – Waiting for Dev... Jan 10 '12 at 21:01
  • accepted for the second pointer (Image trick) in the update. The first is not a standard in any way - just a suggestion of the author and the @media approach does not resolve the Q at all (IMHO). – epeleg Jan 16 '12 at 08:24
-2

Set the width and then use Javascript 

container.style.height = ( container.style.width / 3 )

(Rough syntax!)

Dave

detheridge02
  • 640
  • 1
  • 6
  • 18