I am using bootstrap2 for design
<div class="row">
<div class="span-4">
</div>
<div class="span-8">
<div id="expandable" style="width:100%">
here I want to change the height of this div according to the width size.
</div>
</div>
</div>
When I drag the browser, it changes the size of 'span-8' div.
I would like to keep height as 4:3 with width.
For example,when width is 400,I would like keep height 300. when width is 200 height should be 150
is it possible?
I have answered this kind issue here.
The point is to use a dummy div
and an absolutely positioned div
to make responsive elements with fixed aspect ratio. This solution uses only CSS.
To adapt it to your case, you can do this :
HTML :
<div class="row">
<div class="span-4"></div>
<div class="span-8">
<div class="expandable">
here I want to change the height of this div according to the width size.
</div>
<div class="dummy"></div>
</div>
</div>
CSS :
.span-8 {
position: relative;
}
.dummy {
padding-top: 75%;
}
.expandable {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background:gold;
}