不知道怎么起个标题能更加清楚的说清楚我的意图, 那就打个比方吧: 比如我们在手机端上方一张宽度 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 https://codepen.io/feiwen8772/pen/GPpdyy
.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 https://codepen.io/feiwen8772/pen/LMprOm
.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
如果你觉得本文对你有帮助, 那就请分享给更多的朋友
来源: https://www.css88.com/archives/10370