whitebear whitebear - 6 months ago 17
HTML Question

keep aspect ratio of expandable div

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?

Answer

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 :

DEMO

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;
}