根據高度保持div的寬高比

Question

我必須保持div的長寬比相對於窗口大小的高度。

我可以使用padding-bottom;或padding-top;關於寬度（X％）保持高寬比（x：y）。

所以從這個比喻，我嘗試使用padding-left;

.wrapper{ 
    height: Y%, 
    position: relative; 
} 

.wrapper:after{ 
    padding-left: Y(x/y)%; 
    display:block; 
} 

但padding-left的百分比值不給任何寬度與包裝。

如何根據身高保持該div的縱橫比？

Answer 1

由於％填充/邊距是根據限定符的寬度計算的，因此不能使用「填充技術」根據高度保持高寬比。

的CSS解決方案，你將不得不使用vh單位：

VH： 1/100的視口的高度。

Source

對於瀏覽器支持看到canIuse

---

示例1：1的縱橫比：

DEMO

CSS

div{ 
    width: 50vh; 
    height: 50vh; 
}