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