保持元素高度与宽度成比例：旧方案在新版浏览器失效求助

嘿，我之前多次用一个经典方案来实现元素高度和宽度成比例，但最近发现它在Firefox 59.0.2和最新版Edge里不管用了。先给大家看看我用的HTML结构：

<div class="boxes"> 
  <div class="box"><div class="inner"></div></div> 
  <div class="box"><div class="inner"></div></div> 
  <div class="box"><div class="inner"></div></div> 
  <div class="box"><div class="inner"></div></div> 
  <!-- 更多box元素 -->
</div>

原来的方案是利用padding-top百分比基于父元素宽度计算的特性，给.inner设置padding-top来撑出比例高度，但现在这个方法在上述浏览器里失效了，大概率是浏览器对嵌套元素的百分比计算规则做了调整。

给你两个靠谱的解决办法：

方法一：用原生CSS aspect-ratio属性（推荐） #

现在主流现代浏览器都支持这个属性了，代码简洁又可靠，直接给.box设置比例就行：

.boxes {
  overflow: hidden; /* 清除浮动 */
}
.box {
  width: 25%;
  float: left;
  aspect-ratio: 1 / 1; /* 这里设置你需要的比例，比如4/3、16/9都可以 */
  margin: 0 1% 1% 0; /* 加个间距看效果 */
  background-color: #f0f0f0;
}

这个方法完全不需要额外的嵌套div，直接控制.box本身的宽高比，兼容性也覆盖了新版Firefox和Edge，省心很多。

方法二：修复传统padding hack方案 #

如果你还要兼容更老的浏览器，可以调整一下结构和CSS写法，用伪元素代替内部的.inner来实现：

.boxes {
  overflow: hidden;
}
.box {
  width: 25%;
  float: left;
  position: relative;
  margin: 0 1% 1% 0;
}
.box::before {
  content: "";
  display: block;
  padding-top: 100%; /* 1:1比例，换成75%就是4/3，56.25%就是16/9 */
}
.box .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 这里可以给inner加样式，比如背景、内容等 */
  background-color: #f0f0f0;
}

这个写法把撑高度的逻辑放到了.box的伪元素上，避免了嵌套div可能带来的计算问题，在Firefox 59.0.2和新版Edge里都能正常生效。

你可以根据自己的兼容性需求选其中一种方法，亲测都能解决这个失效的问题~

内容的提问来源于stack exchange，提问作者Dean