固定宽高比

1. `padding-bottom`或者`padding-top`

.box{
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    background-color: lightsalmon;
}

原理：（面试题有问到）

让高度设为0，完全使用padding-bottom或者padding-top撑开高度。然后padding的百分比就是基于父元素的宽度来作为参照物的。以上的宽高比为1:1。

缺点：

上述这种办法只能让高度随着宽度改变，而无法让宽度随着高度改变。

那有没有办法实现宽度随着高度动呢？ 答案是没有，至少现在没有。但将来就会有了 。接下来我们一起看看更简单便捷的另一种方式。

2. `aspect-ratio`

通过padding-bottom来设置宽高比的方式并不直观。W3C 的 CSS 工作组为了避免这一问题，已经在致力于实现这样一个属性 aspect-ratio 。该方案已经提出，但是还没有浏览器实现，现在还处于设计节点，暂时还没有发布。

aspect-ratio 的语法格式如下： aspect-ratio: /<widtu-ratio>/<height-ratio> 。

如下，我们可以将 width 或 height 设为 auto ，然后指定 aspect-ratio 。另一个值就会按照比例自动变化。

/* 高度随动 */
.box1 {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
/* 宽度随动 */
.box2 {
    width: auto;
    height: 100%;
    aspect-ratio: 16/9;
}

这一技术可以很灵活的实现元素的固定宽高比，并且指定宽高之一均可。只是现在还没有浏览器实现。

3. 可替换元素

可替换元素(如 、 )和其他元素不同，它们本身有像素宽度和高度比的概念。所以如果想实现这一类元素固定宽高比，就比较简单。

我们可以 指定其宽度或者高度值，另一边自动计算就可以了 。

<div class="img-wrapper">
    <img src="https://p3.ssl.qhimg.com/t01f7d210920c0c73bd.jpg" alt="">
</div>

.img-wrapper {
    width: 50vw;
}

img {
    width: 100%;
    height: auto;
}

父元素的宽度是随视口不断变化的，所以图片的宽度在不断变化，高度自适应，所以高度也在不断变化。

你可能没注意到，我们给 img 元素设定了 height: auto; ，这是为了避免开发者或者内容管理系统在 HTML 源码中给图片添加了 height 属性，通过这个方式可以覆盖掉，避免出现 bug。

此外，对于 video 元素也类似，大家可以试下，效果如下。

3. 总结

如果元素的尺寸已知的话，就没什么好说的，直接计算好宽高写上去就好了。
如果尺寸未知：
- 如果是可替换元素，则将 width / height 其一设定尺寸，另一个设为 auto ，则可替换元素会根据其固有尺寸进行变化。
- 如果是普通的元素，我们可以通过 padding-top / padding-bottom 的方式来模拟固定宽高比，不过这种方式不灵活，只能够高度随着宽度变。CSS 工作组现在正在引入一种新的方案 aspect-ratio ，可以很方便地指定宽高比，不过暂时还没有浏览器实现。相信不久之后就会有浏览器逐渐实现了。

参考链接：

面试官提问之CSS如何实现固定宽高比

最后编辑于：2020.02.29 15:13:00

固定宽高比