内容简介:小编推荐:
小编推荐: 掘金是一个面向 程序员 的高质量技术社区,从 一线大厂经验分享到前端开发最佳实践,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
不知道怎么起个标题能更加清楚的说清楚我的意图,那就打个比方吧:比如我们在手机端上方一张宽度 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%; }
.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%; }
.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
如果你觉得本文对你有帮助,那就请分享给更多的朋友
关注「前端干货精选」加星星,每天都能获取前端干货
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- web容器如何自适应视口大小
- html – Flex容器不会扩展以适应IE中的内容
- 伯克利提出高效在线适应算法,让机器人拥有快速适应环境变化的新能力
- 浅谈Web自适应
- 自适应布局
- <input> 宽度自适应变化
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
实战Linux编程精髓
罗宾斯 / 中国电力出版社 / 2005-7 / 59.80元
编写应用软件,特别是那些比较重要的软件,毫无疑问要涉及到系统调用。在UNIX/Linux环境下编程更是如此。要想编写优秀的软件,就必须熟悉这些系统调用的方方面面。通过阅读这本书,你能够快速地掌握这些重要技术,以构建严谨的Linux软件。全书主要分为三大部分:第一部分讨论了基本的编程问题,包括Linux编程环境、基本的文件和进程管理与操作、内存操作,还介绍了一些基本的库接口。第二部分比较深入地讨论了......一起来看看 《实战Linux编程精髓》 这本书的介绍吧!