如果你想在纵向视图或横向视图的视口中放置一个正方形(尽可能大，但没有任何东西粘在外面)，在纵向/横向方向上切换使用vw/vh:

@media (orientation:portrait ) {
  .square {
    width :100vw;
    height:100vw;
  }
} 
@media (orientation:landscape) {
  .square {
    width :100vh;
    height:100vh;
  }
} 

正如w3schools.com网站上所述，并在这个公认的答案中有所重申，填充值为百分比(重点是我的):

以包含元素宽度的百分比指定填充

因此，一个保持16:9纵横比的响应式DIV的正确示例如下:

CSS

.parent {
    position: relative;
    width: 100%;
}
.child {
    position: relative;
    padding-bottom: calc(100% * 9 / 16);
}
.child > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

HTML

<div class="parent">
    <div class="child">
        <div>Aspect is kept when resizing</div>
    </div>
</div>

在JSFiddle上演示

假设你想保持宽度:100px和高度:50px(即2:1) 算一下:

.pb-2to1 {
  padding-bottom: calc(50 / 100 * 100%); // i.e., 2:1
}

只是一个想法或黑客。

div { 背景颜色:蓝色; 宽度:10%; 过渡:底色0.5s，宽度0.5s; 字体大小:0; ｝ div:{徘徊 宽度:20%; 背景颜色:红色; ｝ img { 宽度:100%; 高度:汽车; 可见性:隐藏; ｝ < div > <！—使用具有目标纵横比的图像。样本是一个正方形——> <img src="http://i.imgur.com/9OPnZNk.png" /> < / div >

我使用了一个新的解决方案。

.squares{
  width: 30vw
  height: 30vw

与主纵横比

.aspect-ratio
  width: 10vw
  height: 10vh

然而，这是相对于整个视口而言的。所以，如果你需要一个div是视口宽度的30%，你可以使用30vw代替，因为你知道宽度，你可以使用calc和vw单位在高度上重用它们。

我遇到过这个问题很多次，所以我为它做了一个JS解决方案。这基本上是根据你指定的元素宽度比例来调整domElement的高度。你可以这样使用它:

<格比=“4x3”></div>

请注意，因为它正在设置元素的高度，元素应该是一个display:block或display:inline-block。

https://github.com/JeffreyArts/html-ratio-component