getting the height of a div to match the width when it shrinks responsively

Question

In the jsfiddle here http://jsfiddle.net/H3VW5/ I have 3 divs where the width is based on perencentage. Is there a simple way (without having an image in it) to get the height to match a certain aspect ratio so that when the window shrinks the height shrinks with the width to keep the same shape? IE. if the div size was 600px x 600px at 60% and the window shrunk to make the width 500px the height would also shrink to 500px?

/*CSS:*/

.div1 {width:60%; height:400px; background-color:#066; float:left}
.div2 {width:20%; height:400px; background-color:#09F; float:left;}
.div3 {width:20%; height:400px; background-color:#C00; float:left;}

<!--HTML:-->

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

score 2 · Accepted Answer · edited May 23 '17 at 10:26

2

There is a good trick described here which may solve it for you.

Basically, you let the width just be auto (don't specify a px height), and use padding-bottom with a percentage (%). Neat.

edited May 23 '17 at 10:26

Community

1
1

answered Aug 22 '13 at 19:44

fred02138

3,323
1
14
17

Except I had to put a div inside the one that was 60% so that the width could be 100% then the padding would correspond ie. if the padding-bottom was 100% as well it would stay a square. – Blake Bowman Aug 22 '13 at 20:01

score 0 · Answer 2 · answered Aug 22 '13 at 19:35

How about setting a height and width on your body and html, and then changing the height of your div to percentages? This allows you to then set relative liquid heights on your div because now they have something to size to.

body, html { height: 100%; width: 100%; }

.div1 {width:60%; height:40%; background-color:#066; float:left}
.div2 {width:20%; height:40%; background-color:#09F; float:left;}
.div3 {width:20%; height:40%; background-color:#C00; float:left;}

JSfiddle link

With this method if they don't shrink the browser proportionally the aspect ratio of the div does not stay the same. — Blake Bowman, Aug 22 '13 at 19:43

score 0 · Answer 3 · answered Aug 22 '13 at 19:50

0

You can use jquery to control the height of the divs

$(".ratio" ).each(function () {
    var height = $(this).width();
    console.log(height);
    $(this).css('height',height + 'px');
});

Link : http://jsfiddle.net/gwx6y/

answered Aug 22 '13 at 19:50

Chris Feather

1

score 0 · Answer 4 · answered Aug 22 '13 at 20:05

Here is what I came with. The only thing which is not hacky and it gets nice aspect ratiou keeping is an image. So, if change the markup a bit to:

<div class="wrapper">
    <img src="bigimage.jpg" />
    <div class="div1">a</div>
    <div class="div2">b</div>
    <div class="div3">c</div>
</div>

and set max-width: 100%; to the image its height will be changed like that so it keeps the original aspect ratio. So, we can use that and position the divs absolutelly, set the proper width and height to 100%. The dimensions of the image are leading here. The wrapper takes the same size and because the divs are childs of the same wrapper their height is also the same.

CSS:

.wrapper {
    width: 100%;
    position: relative;
}
.wrapper img {
    position: relative;
    max-width: 100%;
    z-index: 1;
    display: block;
    opacity: 0;
}
.div1 {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width:60%;
    background-color:#066; 
    z-index: 2;
}
.div2 {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    left: 60%;
    width:20%; 
    background-color:#09F;
    z-index: 3;
}
.div3 {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    left: 80%;
    width:20%; 
    background-color:#C00;
    z-index: 4;
}

Example of my solution is available here: http://jsfiddle.net/krasimir/H3VW5/3/

P.S. The good thing in this approach is that you can keep whatever ratio you want. All you have to do is to create an image with that ratio.

getting the height of a div to match the width when it shrinks responsively

4 Answers4