新的纵横比标签会很棒，但它打乱了我的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 > 身体< / >

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

它可以这样使用:

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

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

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

2020解决方案-使用网格和填充伪元素

我找到了一些更新颖的方法来破案。该解决方案是any填充底部方法的后代，但没有任何位置:绝对子方法，只使用display: grid;和伪元素。

这里我们有。ratio::before，填充底部:XX%，网格区域:1 / 1 / 1 / 1;，这迫使伪元素保持在网格中的位置。虽然这里我们有width: 0;为了防止主元素被这个索引溢出(我们在这里冷地使用z-index，但是这个索引更短)。

我们的主元素。ratio > *:first-child与。ratio::之前的位置相同，即grid-area: 1 / 1 / 1 / 1;，因此它们共享相同的网格单元格位置。现在我们可以在div中放入任何内容，而pseudo元素是决定宽高比的元素。更多关于网格区域。

.ratio { 显示:网格; grid-template-columns: 1 fr; max-width: 200 px;例如，/*可以是100%，取决于父*/ ｝ {前.ratio:: 内容:”; 宽度:0; 填充底:calc(100% / (16/9));/*在这里你可以放置任何比例*/ 网格面积:1 / 1 / 1 / 1; ｝ .ratio > *:第一个孩子{ 网格面积:1 / 1 / 1 / 1;/*与*/前的::相同 背景:rgba(0,0,0,0.1);例如*/ ｝ < div class = "比" > 16/9 < div > < / div > < / div >

虽然你可以使用cssval并使用样式属性将比值放在HTML中。工作与显示:内联网格以及。

.ratio { 显示:inline-grid; grid-template-columns: 1 fr; 宽度:200 px;例如，/*可以是100%，取决于父*/ margin-right: 10 px;例如*/ ｝ {前.ratio:: 内容:”; 宽度:0; 填充底部:calc(100% / (var(—r)));/*在这里你可以放置任何比例*/ 网格面积:1 / 1 / 1 / 1; ｝ .ratio > *:第一个孩子{ 网格面积:1 / 1 / 1 / 1;/*与*/前的::相同 背景:rgba(0,0,0,0.1);例如*/ ｝ <div class="ratio" style="——r: 4/3;"> < div > 4/3 < / div > < / div > <div class="ratio" style="——r: 16/9;"> 16/9 < div > < / div > < / div >

我们是这样解决的:

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

Chrome 88的新特性是CSS的宽宽比属性，其他浏览器也很快会加入。

纵横比CSS属性为盒子设置了一个优先的纵横比，它将用于自动大小的计算和一些其他的布局功能。

CSS技巧文章

更多的信息

div { 背景:rebeccapurple; 身高:100 px; 保证金:1 em汽车; ｝ .square { 纵横比:1 / 1; ｝ < div class = "广场”> < / div >

这是对公认答案的改进:

使用伪元素而不是包装器div 长宽比基于盒子的宽度，而不是它的父元素 当内容变高时，盒子会垂直拉伸

.box { margin-top: 1 em; margin-bottom: 1 em; background - color: # CCC; ｝ {前.fixed-ar:: 内容:“”; 浮:左; 宽度:1 px; margin-left: 1 px; ｝ {后.fixed-ar:: 内容:“”; 显示:表; 明确:; ｝ {前.fixed-ar-16-9:: padding-top: 56.25%; ｝ {前.fixed-ar-3-2:: padding-top: 66.66%; ｝ {前.fixed-ar-4-3:: padding-top: 75%; ｝ {前.fixed-ar-1-1:: padding-top: 100%; ｝ .width-50 { 显示:inline-block; 宽度:50%; ｝ .width-20 { 显示:inline-block; 宽度:20%; ｝ <div class="box - fixed-ar- ar-16-9">16:9 full width</div> <人力资源> <div class="box - fixed-ar- ar-16-9 width-50">16:9</div> <人力资源> <div class="box - fixed-ar- ar-16-9 width-20">16:9</div> <div class="box - fixed-ar-3-2 width-20">3:2</div> <div class="box - fixed-ar-4-3 width-20">4:3</div> <div class="box - fixed-ar-1-1 width-20">1:1</div> <人力资源> <div class="box - fixed-ar- ar-16-9 width-20">16:9</div> <div class="box - fixed-ar- ar-16-9 width-50">16:9</div>