CSS: Keeping a div's height relative to its width

Question

My question is very similar to this question: CSS: 100% width or height while keeping aspect ratio?

I have a div whose position is fixed. The width of the div must be 100% and its height exactly 1/6th of its width. Is there a -webkit-calc() way of doing this?

Note: JS solutions are not preferred as a zoom/orientation change can affect the width/height.

Thanks for the solution. I personally cannot retest it as I had this problem over a year ago and have lost context. Perhaps the next person who has this problem would try out your solution. :) — Akshaya Shanbhogue, Apr 24 '14 at 09:22

score 11 · Accepted Answer · answered May 14 '13 at 11:10

Is this what you are after? I'm not using -webkit-calc() at all. I've inserted a 1px by 6px image into a outer div which has position: fixed applied to it, and set the image to have a width of 100% and position: relative. Then I have added an inner div which is absolutely positioned to be as high and wide as its ancestor.

Now you can change the width of the outer div, and the images' width: 100% setting will ensure that both the outer and the inner div's are guaranteed to always have a height equal to 1/6th of their width (or at least as close to exactly equal as it can get, the heights will be rounded off to the closest whole number of pixels). Any content could go inside the inner div.

HTML

<div>
  <div></div>
  <img src="https://dl.dropboxusercontent.com/u/6928212/sixbyone.png" />
</div>

CSS

html, body {
  margin: 0px;
  padding: 0px;
}
div {
  position: fixed;
  width: 100%;
}
div > div {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;      
}
img {
  width: 100%;
  display: block;      
  position: relative;
}

Here's a jsFiddle showing the requested behaviour.

+1 Very nice, creative solution! – Christoph May 14 '13 at 12:03 — Christoph, May 14 '13 at 12:03

score 9 · Answer 2 · edited May 23 '17 at 12:18

You can also use the solution I described in Responsive square columns.

It is based on the fact that % padding-top/bottom and margin-top/bottom are calculated according to the whidth of the parent element.

Adapted to your situation it would look like this :

FIDDLE

HTML :

<div class="wrap">
    <div class="content">
    </div>
</div>

CSS :

.wrap{
    position:fixed;
    width:100%;
    padding-bottom:16.666%; /*  100x1/6 = 16.666...*/
}
.content{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

user123_456 · Answer 3 · 2013-05-14T09:37:28.040

0

you can always set div width like this:

$('#div1').css("width", $('#div1').height()/6);

EDIT:

or you could use something like this:

/* Firefox */
width: -moz-calc(100% / 6);
/* WebKit */
width: -webkit-calc(100% / 6);
/* Opera */
width: -o-calc(100% / 6);
/* Standard */
width: calc(100% / 6);

This is only an example-..But it is impossible to get height of a div in a pixels in the css file..you need to use jquery for that

EDIT:

height 1/6 of a width

$('#div1').css("height", window.width()/6);

edited May 14 '13 at 09:37

answered May 14 '13 at 09:21

user123_456

5,635
26
84
140

Thanks for the answer but this does not solve my question. width: -webkit-calc(100% / 16.66666666667); makes width 1/6th of PARENTS WIDTH. I need height 1/6th of width! :) Thanks anyway – Akshaya Shanbhogue May 14 '13 at 09:31
@Akshay but you can't do that in css, you can only do it with javascript – user123_456 May 14 '13 at 09:35
I was reading about webkit calculations and was wondering if we could do it using that.. – Akshaya Shanbhogue May 14 '13 at 09:36
check my edited answer is this helpful? – user123_456 May 14 '13 at 09:37
This was always my last approach. The reason is because my width is 100%, any changes in page layout like orientation change does not guarantee my height to be 1/6th the width. Ofcourse I can listen to the resize events and handle it, but a css solution if any will reduce the effort – Akshaya Shanbhogue May 14 '13 at 09:45
maybe you can put your width to `auto` then `web-calc` could potentially work? I know what you mean..I had the same problems...but trust me this is the only way – user123_456 May 14 '13 at 10:16

score 0 · Answer 4 · 2013-05-14T10:03:31.480

0

you could use jquery, e.g.$('.someclass').css('width', 180); $('.someclass').css('height', $('.someclass').width() / 6);

moved the second suggestion from the comment for readability

$('.btnResize').click(function() { $('.div').css('height', $('.div').width()/6);});

edited May 14 '13 at 10:03

answered May 14 '13 at 09:28

Thanks. Does not solve the issue. width needs to be 100% only for resize issues. So, if I fix my height by JS once, and I zoom or change orientation, the height is not reset to 1/6th the width. – Akshaya Shanbhogue May 14 '13 at 09:35
sorry, i misunderstood, and perhaps i still do; if it's only an issue on resize, then there must be a trigger event you could catch with jquery (see example in amended post); if it's not resized via button, then there should be another appropriate event to catch – May 14 '13 at 10:03

CSS: Keeping a div's height relative to its width

4 Answers4

Linked