保持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，（視口寬度）和內部的元件I將創建使用百分比它們的寬度和填充的div的外容器。

個

一些例子：
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>