javascript - 保持div的纵横比

Question

我试图保持 2 个 divs 的纵横比。我的做法是让高度等于 20vw，宽度是百分比。

当我调整窗口大小时，它按预期工作。问题是当我添加边距时。当我向 divs 添加边距时，宽度变小，高度保持不变，因此纵横比发生变化。

如何在更改边距量时保持宽高比？ (如果这是它应有的行为方式，那么是否有解决方法？

这是 JSFiddle ，这是代码片段:

$(document).ready(function () {
    $("button").click(function () {
        $("div").css({
            "margin": "0 20px",
                "width": "calc(100% / 2 - 40px)" //Subtract the margin
        });
    });
});

div {
    height: 20vw;
    width: calc(100% / 2);
    float: left;
}
#first {
    background-color: yellow;
}
#second {
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first"></div>
<div id="second"></div>
<button>Add Margins</button>

Answer 1

就我个人而言，我会有一个使用百分比宽度或 20vw(视口(viewport)宽度)等属性的外部容器，并且在该元素内部我会创建使用百分比作为宽度和宽度的 div填充。

Some examples:
Height equals width in pure CSS
Equal width and height
JSFiddle simple example

#container {
    display: inline-block;
    position: relative;
    width: 50%;
}
#dummy {
    margin-top: 75%;
}
#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f0f0f0;
    border: 3px dotted silver;
    padding-top:14px;
    text-align: center;
}

<div id="container">
    <div id="dummy"></div>
    <div id="element">
        resize to maintain aspect ratio
    </div>
</div>