保持可扩展div的纵横比[重复]

【问题标题】：keep aspect ratio of expandable div [duplicate]保持可扩展div的纵横比[重复]
【发布时间】：2014-05-07 12:20:02
【问题描述】：

我正在使用 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>

当我拖动浏览器时，它会改变 'span-8' div 的大小。

我想将高度与宽度保持为 4:3。

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

有可能吗？

【问题讨论】：

你能用jquery捕捉拖动事件并设置witdh/height属性吗？

标签： html css twitter-bootstrap responsive-design aspect-ratio

【解决方案1】：

我已经回答了此类问题here。关键是使用虚拟div 和绝对定位div 来制作具有固定纵横比的响应式元素。此解决方案仅使用 CSS。

要使其适应您的情况，您可以这样做：

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

【讨论】：

谢谢，对我很有帮助。