在默认的水平文档流方向下,CSS
和
- margin
属性的垂直方向的百分比值都是相对于宽度计算的,这个和
- padding
,
- top
等属性的百分比值不一样。
- bottom
这么设计的原因在我的新书(应该不出几个月就要出版了)中会有说明,这里不展开。
对于
属性而言,任意方向的百分比
- padding
都现对于宽度计算可以让我们轻松实现固定比例的块级容器,举个例子,假设现在有个
- padding
元素:
- <div>
- div { padding: 50%; }
或者:
- div { padding: 100% 0 0; }
或者:
- div { padding-bottom: 100%; }
则这个
元素尺寸就是一个宽高 1:1 的正方形,无论其父容器宽度是多少,这个
- <div>
元素总能保持比例不变。
- <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
但是,如果我们的图片不是通栏,而是需要离左右各
的距离,此时,我们的 CSS 代码就要啰嗦点了,想要保持完美比例,就使用借助 CSS3
- 1rem
计算:
- calc()
- .banner {
- height: calc(0.1515 * (100vw - 2rem));
- background - size: cover;
- }
如果,图片距离两侧的宽度是动态不确定的,则,此时
也捉襟见肘了,但,恰恰是普普通通其貌不扬的
- calc()
属性,其兼容性和适应性都一级棒。
- padding
3. 使用百分比
,如下:
- padding
- .banner {
- padding: 15.15 % 0 0;
- background - size: cover;
- }
此时无论图片的外部元素怎么变动,比例都是恒定不变的。
但是有时候我们的图片是不方便作为背景图呈现的,而是内联的
,百分比
- <img>
也是可以轻松应对的,求套路是比较固定的,图片元素外面需要一个固定比例的容器元素,例如下面的 html 结构:
- padding
- <div class="banner">
- <img src="" banner.jpg>
- </div>
元素同样负责控制比例,然后图片填充
- .banner
元素即可,CSS 代码如下:
- .banner
- .banner {
- padding: 15.15% 0 0;
- position: relative;
- }
- .banner > img {
- position: absolute;
- width: 100%; height: 100%;
- left: 0; top: 0;
- }
效果就达成了!
眼见为实,去年 起点中文网手机版 诸多页面的通栏广告就都是这么实现的,最终的效果参见下面的 gif 截图(如果图无法显示,可以评论反馈):
可以看到,无论屏幕宽度多宽,我们的广告图片比例都是固定的,不会有任何剪裁,不会有任何区域缺失,布局就显得非常有弹性,也更健壮。
————-
其实,我之前一直低估百分比
的实际应用价值,因为有
- padding
单位的存在,毕竟理解
- vw
看上去要更简单一些,所以,一直就没做相关技巧的介绍。但是,随着图片相关布局处理越来越多,我发现,百分比
- vw
的实用价值要比想象的大,要比
- padding
单位适用场景更多,兼容性更好(百分比特性 IE6 + 支持,图片 100% 覆盖 IE8 + 支持)。
- vw
对于复杂布局,如果图片的宽度是不固定的自适应的,我们通常会想到这么一个取巧的做法,就是只设定图片的宽度,例如:
- img { width: 100%; }
此时浏览器默认会保持图片比例显示,图片宽度大了,高度也跟着一起变大;图片宽度小了,高度也跟着一起变小。开发人员似乎无需关心图片真实比例是怎样的。
然而这种技巧有一个非常不好的体验问题,那就是随着页面加载的进行,图片占据的高度会有一个从
到计算高度的图片变化,视觉上会有明显的元素跳动,代码层面会有布局重计算。
- 0
所以对图片高宽进行同时约定还是有必要的,但是同时要保证宽度自适应,似乎有点难度。记住,如果遇到这种需求场景,没有比百分比
布局更好的做法!
- padding
您可以狠狠地点击这里: 需要保持图片比例且宽度自适应 padding 实现 demo
缩小浏览器宽度可以看到不同宽度下的布局效果,Gif 效果截图如下:
此 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% 容器宽度,图片高宽比
,此时,CSS 垂直方向百分比就 666 了,如下:
- 4:3
- .img - box {
- padding: 0 50 % 66.66 % 0;
- }
买了几年的域名 riziyan.com 备案成功了,域名很好记,"日照香炉生紫烟" 之 "日紫烟",嘿嘿,至于这个域名要干嘛…… 秘密~~
好了,就这些。
来源: http://www.tuicool.com/articles/RBnIbqI