keep aspect ratio of expandable div

Question

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?

can you catch the drag event with jquery and set the witdh/height attributes? — Radu, Mar 28 '14 at 08:49

score 2 · Accepted Answer · edited May 23 '17 at 11:52

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

keep aspect ratio of expandable div

1 Answers1