用 CSS 实现一个宽高等比自适应容器
打个比方：比如我们在手机端上方一张宽度 100% 的图片，我们如果不设置图片的高度，那么这个图片会根据图片的原始尺寸等比缩放。今天我们要讲的就是实现这么一个类似于图片等比缩放的容器。
实现原理
了解了意图后我们就稍微讲一下实现原理。原理很简单，我们只要根据元素的宽度，为元素设置一个相应比例的高度就可以了。
vw 视口单位(viewport units) 实现
我们知道视口单位(viewport units)是相对于视口(viewport) 尺寸而言的。 100vw 等于视口宽度的 100% ，1vw 相对于等于视口宽度的 1%。那么这个特性特别适合在移动端实现宽高等比自适应容器。
比如我们还是实现一张宽度 100% 的图片。这样就很久简单了：
HTML 代码:
<div class="container">
<img alt="" src="/newimg88/2018/12/css-selector.jpg" />
</div>
CSS 代码:
*{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() 函数配合稍微多点计算
用子元素的 padding 属性实现
这是一个比较完美的解决方案，但是首先我们要明白一件事情：子元素的 padding 属性百分比的值是相对于父容器的宽度而言的。明白这一点特别重要，
子元素的 padding 属性百分比的值是相对于父容器的宽度而言的
父元素 .container 宽度为 200px。子元素 .content 的 padding:10% , 者 .content 的 padding 计算出来是 20px。
例子的解决方案：
HTML 代码:
<div class="container">
<div class="content">
<img alt="" src="/newimg88/2018/12/css-selector.jpg" />
</div>
</div>
CSS 代码:
.container{ width:100%; }
.content{
overflow: hidden;
height: 0;
padding-bottom: 36.5%;
}
.container .content img{ width:100%; }
.content 中 padding-bottom: 36.5%; 是 图片的原始尺寸（800*292）的宽高比例，即 292/800=36.5%。
这里特别需要注意的是
.content 中 height: 0; 属性，没有 height: 0; 配合，你可能会得到意想不到的结果。
这里把 *{margin:0;padding:0} 样式删除了，能最大限度的避免其他因素的影响。纯粹的进行宽高比例计算就可以了
|
|
收藏
淘帖
踩
