我想分享这一点，因为这是一段令人沮丧的几天的旅程，找到了一个适合我的解决方案。我使用这些填充技术(上面提到过使用一些填充和绝对定位的变化)来为网格/flex布局中的按钮类元素实现1:1的纵横比。布局设置为100vh高，以便始终显示为单个非滚动页面。

填充技术确实工作得很好，但它很容易破坏你的网格布局，并导致爆炸性/讨厌的滚动条。在这种情况下，那些说绝对div不会影响布局的人是错误的，因为父元素在高度和宽度上都在增长，即使子元素没有直接影响布局，父元素也会扰乱你的布局。

通常这不是问题，但在使用网格时需要注意。网格是一个2D布局，它可以在两个轴上考虑大小和布局。我仍然试图理解这的确切性质，但到目前为止，似乎至少如果你在一个网格区域内使用这种技术，在两个轴上都受到fr单位的限制，当纵横比项增长或以其他方式改变布局时，你几乎肯定会遇到井喷(显示:无切换和交换网格区域与css也是布局变化问题，导致我的井喷)。

在我的例子中，我限制了一个不需要的列的高度。将其改为“auto”而不是“1fr”，使我所有的其他布局保持不变，防止井喷，同时仍然让我保持我漂亮的方形按钮!

我不知道这是否是这里每个人沮丧的来源，但这是一个很容易犯的错误，即使使用开发工具也不能让你准确地知道井喷来自哪里，因为在许多情况下，它并不是一个单独的元素井喷出来的情况，而是网格布局扩大自己，以保持那些fr单位在垂直和水平上的准确。

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

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

我们是这样解决的:

.square {
  width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  background: red;
  position: relative;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
}

参见https://jsfiddle.net/r1jL3oqa/1/

艾略特启发我想出了这个解决方案——谢谢:

png是一个完全透明的png文件，大小和你喜欢的纵横比一样，在我的例子中是30x10像素。

HTML

<div class="eyecatcher">
  <img src="/img/aspectratio.png"/>
</div>

CSS3

.eyecatcher img {
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../img/autoresized-picture.jpg);
}

请注意:background-size是css3特性，可能不适用于你的目标浏览器。你可以检查互操作性(f.e.在caniuse.com)。

我想只是使用rem或em应该解决固定比例的问题，但不会像vw或vh那样难以绑定到屏幕上，或者像%那样痛苦地使用flexbox。好吧，没有一个答案适合我，在我的情况下，这对我来说很重要:

<div class="container">
   <div>
   </div>
</div>

.container {
   height: 100vh;
   width: 100vw;
}
.container div {
   height: 4em;
   width: 3em;
}

或者用rem，但是不管怎样，它们中的任何一个都可以。 Rem使用默认的字体大小值，而em使用最接近的字体大小。

新的纵横比标签会很棒，但它打乱了我的divs的定位。 填充包装器div的传统解决方案是有效的，但只能根据父类或视口的宽度调整大小，当高度是限制因素时，这就产生了问题。

我发现min()函数非常有用，并调整了传统的方法，如下所示:

身体{ background-image: linear-gradient(到右上，#FFE6B5， #B3CEBF); 填充:0; 保证金:0自动; overflow-y:隐藏;/*这是为了避免在视口高度小于纵横比要求*/时滚动 ｝ .wrapper { 位置:相对; 宽度:100大众; max-height: 100 vh; ｝ .sixteen-by-nine。宽高比{ 衬底:56.25% /* 9:16比*/ ｝ .content { 位置:绝对的; 上图:0;底部:0;左:0;右:0; 背景颜色:绿色 ｝ .centered { 位置:绝对的; 左:50%; 上图:50%; 转换:翻译(-50%，-50%); 高度:100%; 宽度:min(177.8vh, 100%);/*这总是在视口中保持16:9的比例*/ 字体大小:最小(1.7 3 vh,大众);/*如果你也对缩放字体大小*/感兴趣 背景颜色:蓝色 ｝ 身体< > < div class = "包装" > <div class=" 16x9纵横比"></div> <div class="content" > < div class = "集中" > <！——东西在这里——> < / div > < / div > < / div > 身体< / >