欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

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

发布时间:2019-05-13  编辑:杨雨个人博客网站   点击:   

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

实现原理

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

vw 视口单位(viewport units) 实现

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

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

<div> <img alt="" src="http://www.Css88.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 属性百分比的值是相对于父容器的宽度而言的。明白这一点特别重要,如图:

子元素的 padding 属性百分比的值是相对于父容器的宽度而言的

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

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

<div> <div> <img alt="" src="http://www.Css88.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

本文地址:http://itbyc.com/web/html5/19710.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1