我们是这样解决的:

.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/

有几种方法可以在元素(如div)上指定固定的纵横比，下面是其中的两种:

1. 纵横比CSS属性

div { 纵横比:1 / 1; 宽度:50%; 背景:蓝绿色; ｝ <div>纵横比:1 / 1

这是最简单灵活的解决方案。它直接为元素指定固定的宽高比(或高宽比)。这意味着您还可以根据元素的高度指定纵横比。 它不依赖于父宽度(像填充技术)或视口大小(像下面的vw单元技术)，它依赖于元素自身的宽度或高度。这就是为什么与其他变通方法相比，它是如此强大。

这是一个现代化的房产(2021年)。所有现代浏览器都支持它，请参阅caniuse以获得精确的浏览器支持。

下面是一些不同纵横比的例子:

.ar-1-1{纵横比:1 / 1;} .ar-3-2{纵横比:3 / 2;} .ar-4-3{纵横比:4 / 3;} .ar-16-9{纵横比:16 / 9;} .ar-2-3{纵横比:2 / 3;} .ar-3-4{纵横比:3 / 4;} .ar-9-16{纵横比:9 / 16;} /**对于演示:**/ 身体{ 显示:flex; flex-wrap:包装; 对齐项目:flex-start; ｝ div { 背景:蓝绿色; 宽度:23%; 利润率:1%; 填充:20 px 0; box-sizing: border-box; 颜色:# fff; text-align:中心; ｝ <div class="ar-1-1">纵横比:1 / 1 <div class="ar-3-2">纵横比:3 / 2 <div class="ar-4-3">纵横比:4 / 3 <div class="ar-16-9">纵横比:16 / 9 <div class="ar-2-3">纵横比:2 / 3 <div class="ar-3-4">纵横比:3 / 4 <div class="ar-9-16">纵横比:9 / 16

2. 使用大众单位:

你可以用vw单位来表示元素的宽度和高度。这允许根据视口宽度保留元素的纵横比。

Vw:视口宽度的百分之一。(MDN)

或者，你也可以使用vh作为视口高度，或者甚至使用vmin/vmax来使用视口尺寸中的较大/较小(此处讨论)。

例如:1:1的纵横比 div { 宽度:20大众; 高度:20大众; 背景:黄金; ｝ < div > < / div >

对于其他纵横比，您可以使用下表根据元素的宽度计算高度的值:

aspect ratio  |  multiply width by
-----------------------------------
     1:1      |         1
     1:3      |         3
     4:3      |        0.75
    16:9      |       0.5625

示例:正方形div的4x4网格

身体{ 显示:flex; flex-wrap:包装; justify-content:之间的空间; ｝ div { 宽度:23大众; 高度:23大众; 利润率:0.5大众汽车; 背景:黄金; ｝ < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div >

这里是一个摆弄这个演示，这里是一个解决方案，使一个响应网格的正方形与垂直和水平居中的内容。

浏览器对vh/vw单元的支持是IE9+，参见canIuse了解更多信息

CSS对此有一个新的属性:aspect-ratio。

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

@supports(纵横比:1 / 1){ div { 纵横比:16 / 9; 背景颜色:橙色; ｝ ｝ <div style="width: 200px"></div> . <人力资源/ > <div style="width: 400px"></div> . <人力资源/ > <div style="height: 50px"></div> . <人力资源/ > <div style="height: 10px"></div> .

Chrome和Edge从V88开始完全支持它，Firefox从V81开始支持它(设置layout.css.aspect-ratio。在about:config中启用为true)。

兼容性信息请访问https://caniuse.com/mdn-css_properties_aspect-ratio

由于@web-tiki已经展示了一种使用vh/vw的方法，我还需要一种方法在屏幕中心，这里是9:16人像的代码片段。

.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}

translateY会保持这个中心在屏幕上。Calc (100vw * 16 / 9)预计高度为9/16。(100vw * 16 / 9 - 100vh)为溢流高度，因此，拉升溢流高度/2将使其保持在屏幕中心。

为风景，并保持16:9，你显示使用

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

9/16的比例很容易改变，不需要预定义100:56.25或100:75。如果你想先保证高度，你应该切换宽度和高度，例如:高度:100vh;宽度:calc(100vh * 9 / 16) 9:16纵向。

如果你想适应不同的屏幕尺寸，你可能也会感兴趣

background-size封面/包含 上面的样式类似于包含，取决于宽高比。 object-fit img/video标签的封面/包含 @media(朝向:纵向)/@media(朝向:横向) 媒体查询肖像/风景改变比例。

感谢大家的贡献，我将在这里添加我的解决方案，这主要是通过重复已接受的答案来实现的。我喜欢这种方法的主要原因是没有不必要的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

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