Html 保持可扩展div的纵横比

我正在使用bootstrap2进行设计

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

在这里，我想根据宽度大小更改这个div的高度。

当我拖动浏览器时，它会更改“span-8”div的大小

我想保持4:3的高度和宽度

例如，当宽度为400时，我希望保持高度为300。 宽度为200时，高度应为150

---

有可能吗？我已经回答了这种问题。 关键是使用虚拟的

div

和绝对定位的

div

来制作具有固定纵横比的响应元件。此解决方案仅使用CSS

要使其适应您的情况，您可以执行以下操作：

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>

---

你能用jquery捕捉拖动事件并设置witdh/height属性吗？谢谢，这对我很有帮助。

.span-8 {
    position: relative;
}
.dummy {
    padding-top: 75%;
}
.expandable {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background:gold;
}