这篇文章发布于 2017年08月17日,星期四,00:51,归类于 CSS相关。 阅读 111560 次, 今日 95 次 52 条评论
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=6348
本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意。
一、CSS百分比padding都是相对宽度计算的
在默认的水平文档流方向下,CSS margin
和padding
属性的垂直方向的百分比值都是相对于宽度计算的,这个和top
, bottom
等属性的百分比值不一样。
这么设计的原因在我的新书(应该不出几个月就要出版了)中会有说明,这里不展开。
对于padding
属性而言,任意方向的百分比padding
都现对于宽度计算可以让我们轻松实现固定比例的块级容器,举个例子,假设现在有个<div>
元素:
div { padding: 50%; }
或者:
div { padding: 100% 0 0; }
或者:
div { padding-bottom: 100%; }
则这个<div>
元素尺寸就是一个宽高1:1的正方形,无论其父容器宽度是多少,这个<div>
元素总能保持比例不变。
这种能固定比例的特性什么作用呢?
对于绝大多数都布局,我们并不要求非要比例固定,但是有一种情况例外,那就是图片,因为图片原始尺寸它是固定的。在传统的固定宽度的布局下,我们会通过给图片设定具体的宽度和高度值,来保证我们的图片占据区域稳固;但是在移动端或者在响应式开发情况下,图片最终展现的宽度很可能是不确定的,例如手机端的一个通栏广告,iPhone7下宽度是375,iPhone7 Plus下是414,还有360等尺寸,此时需要的不是对图片进行固定尺寸设定,而是比例设定。
通常有如下一些实现:
1. 固定一个高度,然后使用background-size
属性控制,如下:
.banner { height: 40px; background-size: cover; }
实时效果如下:
可以看到随着宽度的变化,总会有部分图片区域(宽度或高度)无法显示,并不是完美的做法。
2. 使用视区宽度单位vw
,如下:
.banner { height: 15.15vw; background-size: cover; }
如果对兼容性要求不是很高,使用vw
也是一个不错的做法,至少理解起来要更轻松一点。
但是,如果我们的图片不是通栏,而是需要离左右各1rem
的距离,此时,我们的CSS代码就要啰嗦点了,想要保持完美比例,就使用借助CSS3 calc()
计算:
.banner { height: calc(0.1515 * (100vw - 2rem)); background-size: cover; }
如果,图片距离两侧的宽度是动态不确定的,则,此时calc()
也捉襟见肘了,但,恰恰是普普通通其貌不扬的padding
属性,其兼容性和适应性都一级棒。
3. 使用百分比padding
,如下:
.banner { padding: 15.15% 0 0; background-size: cover; }
此时无论图片的外部元素怎么变动,比例都是恒定不变的。
二、CSS百分比padding与宽度自适应图片布局
但是有时候我们的图片是不方便作为背景图呈现的,而是内联的<img>
,百分比padding
也是可以轻松应对的,求套路是比较固定的,图片元素外面需要一个固定比例的容器元素,例如下面的HTML结构:
<div class="banner"> <img src=""banner.jpg> </div>
.banner
元素同样负责控制比例,然后图片填充.banner
元素即可,CSS代码如下:
.banner { padding: 15.15% 0 0; position: relative; } .banner > img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
效果就达成了!
眼见为实,去年起点中文网手机版诸多页面的通栏广告就都是这么实现的,最终的效果参见下面的gif截图(点击播放493K):
可以看到,无论屏幕宽度多宽,我们的广告图片比例都是固定的,不会有任何剪裁,不会有任何区域缺失,布局就显得非常有弹性,也更健壮。
————-
其实,我之前一直低估百分比padding
的实际应用价值,因为有vw
单位的存在,毕竟理解vw
看上去要更简单一些,所以,一直就没做相关技巧的介绍。但是,随着图片相关布局处理越来越多,我发现,百分比padding
的实用价值要比想象的大,要比vw
单位适用场景更多,兼容性更好(百分比特性IE6+支持,图片100%覆盖IE8+支持)。
对于复杂布局,如果图片的宽度是不固定的自适应的,我们通常会想到这么一个取巧的做法,就是只设定图片的宽度,例如:
img { width: 100%; }
此时浏览器默认会保持图片比例显示,图片宽度大了,高度也跟着一起变大;图片宽度小了,高度也跟着一起变小。开发人员似乎无需关心图片真实比例是怎样的。
然而这种技巧有一个非常不好的体验问题,那就是随着页面加载的进行,图片占据的高度会有一个从0
到计算高度的图片变化,视觉上会有明显的元素跳动,代码层面会有布局重计算。
所以对图片高宽进行同时约定还是有必要的,但是同时要保证宽度自适应,似乎有点难度。记住,如果遇到这种需求场景,没有比百分比padding
布局更好的做法!
您可以狠狠地点击这里:需要保持图片比例且宽度自适应padding实现demo
缩小浏览器宽度可以看到不同宽度下的布局效果,Gif效果截图如下(点击播放251K):
此demo难点就是图片自适应同时保持比例,以及页面刷新的时候没有布局稳固不晃动,其核心HTML和CSS代码如下:
<div class="works-item-t"> <img src="./150x200.png"> </div>
.works-item-t { padding-bottom: 133%; position: relative; } .works-item-t > img { position: absolute; width: 100%; height: 100%; }
可以看到,当把垂直方向padding
值只使用padding-bottom
表示的时候,如果没有text-align
属性干扰,<img>
元素的left:0;top:0
是可以省略的。
对于这种图片宽度100%容器,高度按比例的场景,padding-bottom
的百分比值大小就是图片元素的高宽比,就这么简单。
但,有时候,图片宽度并不是100%容器的,例如,图片宽度50%容器宽度,图片高宽比4:3
,此时,CSS垂直方向百分比就666了,如下:
.img-box { padding: 0 50% 66.66% 0; }
三、结束语
买了几年的域名riziyan.com备案成功了,域名很好记,“日照香炉生紫烟”之“日紫烟”,嘿嘿,至于这个域名要干嘛……秘密~~
好了,就这些。
感谢阅读,欢迎交流!
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址:https://www.zhangxinxu.com/wordpress/?p=6348
(本篇完)
- Chrome 88已经支持aspect-ratio属性了,学起来 (0.406)
- CSS高宽不等图片固定比例布局的三重进化 (0.284)
- 小tip:FireFox下文本框/域百分比padding bug解决 (0.263)
- CSS深入理解流体特性和BFC特性下多栏自适应布局 (0.244)
- CSS流体(自适应)布局下宽度分离原则 (0.122)
- 对html与body的一些研究与理解 (0.097)
- CSS <position>值简介理解background百分比定位 (0.097)
- 从height:100%不支持聊聊CSS中的“死循环” (0.097)
- CSS text-decoration实现宽度100%波浪线效果 (0.073)
- 介绍2022最期待且已正式支持的CSS container容器查询 (0.073)
- 使用::part伪元素改变Shadow DOM的CSS样式 (RANDOM - 0.003)
height: calc(0.1515 * (100vw – 2rem));
此处的0.1515怎么来的呢?
图片挂了
如果图片都是拼在一张图上的呢?就是需要用背景图片background-position来切图读取图片,这种好像必须要给一个固定的宽高值啊 不然图片出不来
riziyan.com大神居然开始写小说了吗!!!???
有个疑问,我将 img 的 position 属性去掉了,保留 宽高 100%; 父级 div 的padding-bottmo 去掉,缩放浏览器窗口,还是能做到宽高自适应,请问,这又是什么操作
高度height:100%此时无效,生效的是宽度100%。由于图片只有一侧方向尺寸有效的时候依然保持比例,因此有你所说的效果。然后这样实现的问题在于,高度无效,因此,图片加载,尤其首次加载会有一个明显的高度从0到最终CSS高度的变化,触发强烈的重绘,带来不好的体验。
不知道为什么,一设置height:100%;就出问题。
firefox esr访问https://www.zhangxinxu.com/study/201708/percent-padding-auto-layout.html
好像是padding-top值失效了,一直等于0
firefox esr版兼容不了,你用最新版看看
帅呆了
深夜准备面试资料,又拜读您的文章。每次看您的文章,都觉得考虑的方面简直无微不至,各种方案对比,又总是能够指出奇奇怪怪得bug,实在是水平高深!
您的博客,在我一个菜鸟学习路上看来,实在是最有营养的了。真的是有一种饥饿的人扑倒面包上的感觉。
这条评论单纯为了表达我的感激之情,若是我还能在前端学出一点成绩,以后有机会,一定要亲自向您道谢!高山仰止,景行行止,虽身不能至,然心向往之。祝您工作顺利,家庭合睦。
只想知道 紫烟是谁
旭哥你说的66.66我试了并不好用额,因为按照你讲的原理来说,图片正好高度减少为原来的一半了,请指点一下所谓的imgbox是指哪层容器
试了一下下,很好用。不过在table里面,padding百分比好像是相对于tr的宽度的。是这样吗?
正是我要找的教程
img标签的css为什么要加一个position:absolute?
父级的高度完全是由padding撑起来的没有可用空间当然要用定位了
paddding-bottom比例值为 图片宽度除以高度的值
反了,是高宽比,高度除以宽度
想问下 padding-bottom 的百分比是在怎么算出来的呢
旭兄,我想知道 padding 的数值是怎么计算出来的? 比如文中提到的起点网中的那个图片,我去看了下是:padding: 7.575757% 50%; 里面的图片的真实尺寸是:600px*100px,我想知道 7.575757% 和 50% 是如何计算出来的?
其实这里有一个隐藏的知识点,即浏览器默认的盒子模型是包含padding的,img父级的内容高度实际是零,它所占据的实际高度是padding撑开的,所以在设置padding比例值的时候,(paddingbottom+paddingtop)/(paddingleft+paddingright)===img_height/img_width。
至于上文有的地方是padding:15.5% 0 0;这里在浏览器设立div无宽无高且无浮动无定位(相对定位除外)时,div实际宽度为100%,高度为零。
然后回到这个问题,图片宽高比为6:1;然后padding给的两个值乘以2,得到宽高比例6.6:1。 多出的0.6我不确定,可能是界面微调或者需要留出border空白 如果有图片和父级的定位及border信息,大概能确定是做什么的(这里我偏向认为是图片与图片之间需要一定间距,毕竟父级无背景色或边框时,彼此之间间距为零最好,图片呈现给用户看,留一些空白,界面看着爽一点)
4:3的 666是咋来的啊鱼哥
为啥不是padding: 75% 0 0;
666你知道怎么来的了么
高/宽/0.5 得到
是高/宽*50%,害我算半天都没对上
旭哥,问下你文中的gif是用什么软件制作的?
宽度100% 高度rem不行吗,
因为rem是根据屏幕宽度计算的,所以屏幕不同,高度也不同
可以,但padding的兼容更好吧。
看情况吧,padding也可以设置为rem单位
新技能,get
得得得得得得
padding值的大小不知道广该怎么计算。。。。比如图片的高宽都跟着变化,只变化高,只变化宽,这三个情况下,对应在padding怎么设置,值是多少,为什么这么设置可以实现对应的效果,期待您的回复~
超级期待新书~不剧透下是关于什么内容的吗?放个目录尝尝鲜也好啊 =。=
什么时候出呀
大神你好~
我有一个小疑问,就是在 ul 中的 li 标签 ,上一个 和 下一个 标签必须连在一起,如果我在中间加上换行,就显示不出该有的效果:
….
… 这样的格式是正常的,
…
…
这样的格式显示不正常。。。
white-space
或者
font-size:0;
期待新书~
请教一下,对于第二条的效果。同样的,如果图片的原始比例不确定并且和容器的比例不一致,如果以图片中心点和容器的中心为基准,等比例缩小图片最短的边达到容器的宽或高,然后裁去多余的边呢?
.banner {
padding: 15.15% 0 0;
position: relative;
}
.banner > img {
position: absolute;
width: 100%; height: 100%;
left: 0; top: 0;
}
这里对img的定位有什么用 ,我去掉之后,依然是可以正常缩放的
防止text-align对图片的位置造成影响,如果没设置text-align就不用写定位,大佬在文章中有提到,你没仔细看
如果单纯的是一张图片和外层容器,根本不需要定位,定位等比只不过是在一列图片中使用
谢了 受教
要用padding的等比缩放写法,定位比不可少啊。想知道你怎么不需要定位写的
单纯是一张图片和外层容器,是一定需要定位的,不然图片是展示不出来的
虽然我写的粗糙了点,但是大神总结的更到位,在你的博客学到不少,今天看到这篇文章和我写的一篇文章思想差不多,也很是欣慰
谁是紫烟…有个关于input的疑问,input是一个inline-block元素,而通常inline-block元素的宽度是由内容决定的(改成inline也一样),但在width与min-witdh都没有干扰的情况下也会有一个初始宽度,请问原因是什么,有没有办法去掉这个宽度初始值,实现input的宽度也根据内容自适应
display: block; width: 100%;
我是说根据输入框内文字多少宽度自适应
我打算买个照香炉๛ก(ー̀ωー́ก)
凌晨发的。。。d*d*d* ~嫂子让你交公粮( ̄o ̄) . z Z