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

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

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

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

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

我想只是使用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使用最接近的字体大小。

感谢大家的贡献，我将在这里添加我的解决方案，这主要是通过重复已接受的答案来实现的。我喜欢这种方法的主要原因是没有不必要的DOM，因为我在填充之前使用:。

@card-standard-line-height: 21px;
@card-standard-title-line-height: 22.5px;
@16to9percentage: 56.25%;

.overflow {
  background-color: inherit;
  /* stylelint-disable property-no-unknown */
  box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
  /* stylelint-enable */
  color: inherit;
  display: box;
  display: -webkit-box;
  display: -moz-box;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
}

* {
  box-sizing: border-box;
}

body {
  padding: 2rem;
}

.card {
  color: #fff;
  height: auto;
  max-width: 100%;
  min-width: unset;
  position: relative;
  
  h2 {
    font: 18px / 22.5px bold;
  }
  
  p {
    font: 14px / 21px normal;
  }

  &-16to9 {
    .badge {
      color: white;
      display:flex;
      background-color: red;
      justify-content: baseline;
      padding: 16px 32px 12px 16px;
      position: absolute;
      right: 0;
      top: 16px;
      z-index: 2;
      span {
        font: 14px / 14px bold;
      }
    }
    // look at this https://css-tricks.com/aspect-ratio-boxes/
    .card {
      &_description {
        max-height: @card-standard-line-height * 1;
        // Number of allowable lines in layout
        -webkit-line-clamp: 1;
      }

      &_image,
      &_info {
        bottom: 0;
        height: 100%;
        max-height: 100%;
        min-height: 100%;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 0;
      }

      &_info {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 24px;
        z-index: 2;
      }

      &_title {
        max-height: @card-standard-title-line-height * 2;
        // Number of allowable lines in layout
        -webkit-line-clamp: 2;
      }
    }

    &:after,
    &:before {
      content: "";
      display: block;
    }

    &:after {
      background: rgba(0, 0, 0, 0);
      background: linear-gradient(0deg, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 0) 100%);
      bottom: 0;
      height: 100%;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1;
    }

    &:before {
      padding-bottom: @16to9percentage;
    }
  }
}

https://codepen.io/augur/pen/GRNGLZv?editors=0100

实际上，高投票的答案是一个非常好的解决方案，但有一个新的CSS功能，名字是长宽比。

它可以这样使用:

.someClass {
  width: 100%;
  aspect-ratio: 4/3;
}

自动确定高度，但请参见兼容性表:

如果浏览器支持对你的项目很重要，不要使用它。使用填充底技术。

我刚刚创建了一个2:1的div，调整大小以占据全宽度，但如果它会导致顶部或底部超过，则会缩小宽度。但是请注意，这只适用于窗口的大小，而不是父窗口的大小。

#scene {
    position: relative;
    top: 50vh;
    left: 50vw;
    width: 100vw;
    height: 50vw;
    max-height: 100vh;
    max-width: calc(100vh * 2);
    transform: translate(-50%, -50%);
}

我相信你可以计算出正确的%，用于4:3而不是2:1。

我想分享我的解决方案，其中我有一个img-tag填充一定的纵横比。我不能使用背景，因为缺乏对CMS的支持，我不喜欢使用这样的样式标签:<img style="background:url(…)"/ >。此外，宽度为100%，因此不需要像某些解决方案那样设置为固定大小。它将响应伸缩!

.wrapper { 宽度:50%; ｝ .image-container { 位置:相对; 宽度:100%; ｝ {前.image-container:: 内容:“”; 显示:块; ｝ .image-container img { 位置:绝对的; 上图:0; 左:0; 宽度:100%; 高度:100%; object-fit:封面; ｝ {前.ratio-4-3:: padding-top: 75%; ｝ {前.ratio-3-1:: 填充顶:calc(100% / 3); ｝ {前.ratio-2-1:: padding-top: 50%; ｝ <div class="wrapper"> <!——让事情变得小一点——> < p > 一个4:3宽高比的例子，由一个1:1比例的图像填充。 < / p > <div class="image-container ratio-4-3"> <!——让我们用4:3的长宽比——> <img src="https://placekitten.com/1000/1000/" alt="小猫!"/> < / div > < p > 只需在它周围放置其他块元素;它会工作得很好。 < / p > < / div >