[2分钟学个CSS小技巧] 用 CSS 实现一个宽高等比自适应容器

小编推荐： 掘金是一个面向 程序员 的高质量技术社区，从 一线大厂经验分享到前端开发最佳实践，无论是入门还是进阶，来掘金你不会错过前端开发的任何一个技术干货。

不知道怎么起个标题能更加清楚的说清楚我的意图，那就打个比方吧：比如我们在手机端上方一张宽度 100% 的图片，我们如果不设置图片的高度，那么这个图片会根据图片的原始尺寸等比缩放。今天我们要讲的就是实现这么一个类似于图片等比缩放的容器。

实现原理

了解了意图后我们就稍微讲一下实现原理。原理很简单，我们只要根据元素的宽度，为元素设置一个相应比例的高度就可以了。

vw 视口单位(viewport units) 实现

我们知道视口单位(viewport units)是相对于视口(viewport) 尺寸而言的。 100vw 等于视口宽度的 100% ，1vw 相对于等于视口宽度的 1%。那么这个特性特别适合在移动端实现宽高等比自适应容器。

比如我们还是实现一张宽度 100% 的图片。这样就很久简单了：

<div class="container">
 <img alt="" src="https://newimg88.b0.upaiyun.com/newimg88/2018/12/css-selector.jpg" />
</div>

*{margin:0;padding:0}
.container{ width:100%;height:36.5vw }
.container img{ width:100%; }

查看demo

.container 中 height:36.5vw 是 图片的原始尺寸（800*292）的宽高比例，即 292/800=36.5%。

这个方法相对于图片等比缩放特性有个优点就是，无论图片是否加载完成，容器的高度始终在那里，不会造成页面抖动而影响用户体验，还有不会造成页面重绘提升性能。

当然在实际使用过程要考虑容器的 margin ， padding 等因素，所以计算高度比例时估计需要calc() 函数配合稍微多点计算。目前 vw，vh 等视口单位(viewport units)的浏览器支持情况应该很好了，但是你如果你要支持老的手机，那这个方法肯定就不适用了。

用子元素的 padding 属性实现

这是一个比较完美的解决方案，但是首先我们要明白一件事情： 子元素的 padding 属性百分比的值是相对于父容器的宽度而言的 。明白这一点特别重要，如图：

父元素 .container 宽度为 200px 。子元素 .content 的 padding:10% , 者 .content 的 padding 计算出来是 20px 。

回到正题，我们来看上面例子的解决方案：

<div class="container">
  <div class="content">
    <img alt="" src="https://newimg88.b0.upaiyun.com/newimg88/2018/12/css-selector.jpg" />
  </div>
</div>

.container{ width:100%; }
.content{ 
  overflow: hidden;
  height: 0;
  padding-bottom: 36.5%; 
}
.container .content img{ width:100%; }

查看demo

.content 中 padding-bottom: 36.5%; 是 图片的原始尺寸（800*292）的宽高比例，即 292/800=36.5%。这里特别需要注意的是 .content 中 height: 0; 属性，没有 height: 0; 配合，你可能会得到意想不到的结果。

这里我特地把 *{margin:0;padding:0} 充值样式删除了，说明这个解决方案能最大限度的避免其他因素的影响。纯粹的进行宽高比例计算就可以了。而且这个解决方案没有浏览器兼容性问题。当然IE5.5除外（估计你都没见过IE5.5或者IE6长什么样，暴露年龄了）。

你可以缩放 demo 页面的浏览器尺寸试试，该容器始终保持相同的比例。

同样的我们也可以做个列表： https://codepen.io/feiwen8772/pen/xmwaxK

如果你觉得本文对你有帮助，那就请分享给更多的朋友

关注「前端干货精选」加星星，每天都能获取前端干货