保持div的宽高比

Question

我试图保持宽高比为2 divs。我这样做的方式是，我将高度设为20vw，宽度为百分比。

当我调整窗口大小时，它可以正常工作。问题是当我添加保证金时。当我向divs添加边距时，宽度变小，高度保持不变，因此宽高比会发生变化。

更改保证金金额时如何保持宽高比？ （如果这是它应该表现的方式，那么是否有解决方法？

此处为JSFiddle，以及此处的代码段：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

就个人而言，我会有一个外部容器，它使用一个属性，如百分比宽度或20vw，（视口宽度），在该元素内部，我将创建使用百分比作为宽度和填充的div。 BR />

  

一些例子：
  的 Height equals width in pure CSS
  的 Equal width and height
  的 JSFiddle simple example

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;