起因

其实很早以前就想写这个博文来着, 只是一直拖啊拖, 最近工作中又把这个知识点应用了一下, 再加上实习生fe@龙飞也在研究这块的东西, 索性就花了点时间写了一些Demo和这篇博文. 说真的, 写博文确认很费精力了, 要各种查、各种尝试, 略不容易. 不过贵在坚持.

什么是图片塌方

塌方, 是指一些物体在一定的时间内往下堆加的过程, 比如楼塌了. 而在前端项目->图片中, 是指一个页面的图片, 由于没有设置图片的宽高, 在图片加载前图片本身的宽高是未知的, 那么在整个页面中图片是不可见的, 导致把图片下面的内容依次的叠加了, 而这个过程在图片加载后逐渐的恢复.

点击查看-图片塌方的Demo - 请清除缓存以达到最佳效果...

图片塌方对体验上的影响

1. 看刚才的Demo, 可以很明显的看出页面默认是不显示图片, 文字"差点"就挨一起了, 等图片加载后页面才恢复美丽的容颜
2. 图片加载前、加载后页面有明显的跳动感
3. 图片没有默认占位符, 在加载前都不知道会有图片的存在...

图片塌方对图片懒加载的影响

默认时让图片资源链接设置到data-src上, 而真正的src设置一个空白图片, 图片懒加载的原理就是判断图片元素是否在可见范围, 如果在就把data-src替换src, 那么如果图片塌方了, 懒加载的判断图片可见就有问题了, 会直接导致图片请求变多, 没有看到的图片成直接加载了...还是上Demo吧...

点击查看-图片塌方对懒加载的影响

如何解决图片塌方

1. 设置图片宽高尺寸, 但这个设置后在屏幕小于图片宽时会有问题, 常见于移动设备中, 图片比例变形了, 不可取. 点击查看-图片设置宽高后比例受影响
   [画像:图片设置宽高后比例受影响]
2. 图片在有宽高的容器内显示, 而因整体的高会由外容器确定, 也不会塌方
3. 图片响应式等比例缩放, 今天的主角终于出来了...

图片响应式

定义

当然也只是我的理解...

1. 等比例, 不变形
2. 会随着屏幕宽度而变化
3. 合理的兼容小图片(图片宽<屏幕宽)
4. 图片最大宽为屏幕宽
5. 图片友好的占位
6. 图片加载前, 加载后不闪烁

处理思路

首先我们要满足图片最大宽为100%, 然后又不能设置高, 那么高乍处理呢? 写也不是, 不写也不是... 醉了...

大多情况下我们是已知图片的宽和高, (如果你没有这2个, 请出门右转...), 那么我们可以根据这个比例(高/宽)来做事情. 记得2015年时我做过使用比例来适应图片, 是用js计算, 大概是:

var targetWidth = Math.min(window.innerWidth, img.width);
var targetHeight = targetWidth / img.width * img.height;

后来工作中经 @杨帆 帆哥点拨, 使用padding来处理比例, 简直酷毙了~ 大概是这样的:

<div>
 <img />
</div>

div设置height:0;overflow:hidden;达到高宽为0, 溢出隐藏, 然后添加: padding-bottom: (图片高/图片宽 * 100) %, 由于padding的%会按自身元素的宽为基数计算, 这样图片就可以正大光明的用css处理比例了.

方案1. 使用固定宽+图片比例处理响应式

/*外容器*/
.img {
 position: relative;
 display: inline-block;
 vertical-align: top;
 /*最大不能超过屏幕*/
 max-width: 100%;
}
/*这个是为了使用padding做占位, 也是为了把高给挤下去*/
.img i {
 display: block;
 background-color: #f7f7f7;
}
/*设置图片, 使用绝对定位*/
.img img {
 position: absolute;
 left: 0;
 top: 0;
 display: block;
 width: 100%;
 /*设置高会把图片强制拉满容器, 解决图片比例不对(要求是1:1, 实际是2:1)的显示缺陷badcase*/
 /*height: 100%;*/
}

<div class="img" style="width: 1000px;">
 <i style="padding-bottom: 100%"></i>
 <img src="https://dummyimage.com/1000x1000">
</div>

注意点:

1. .img{max-width:100%}是为了不能让图片超出屏幕, 不能满分, 不然她就骄傲了...
2. <i style="padding-bottom: 100%"></i>这个是用(图片高/图片宽 * 100) %计算得出
3. 如果图片比例不对(要求是1:1, 实际是2:1), 会出现漏底色问题, 可以把.img img加个height: 100%解决
4. 应用场景主要是文章详情页内的图片, 知道宽高, 但想让其在屏幕中自适应显示

点击查看-固定宽+高/宽比制作响应式图片

方案2. 使用绝对宽+高/宽比制作响应式图片

.img {
 background-color: #f7f7f7;
 height: 0;
 overflow: hidden;
}
.img img {
 vertical-align: top;
 display: block;
 width: 100%;
}

<div class="img" style="padding-bottom: 100%">
 <img src="https://dummyimage.com/300x300" alt="">
</div>

注意点:

1. 依赖于外层的宽
2. <div class="img" style="padding-bottom: 100%">这个是用(图片高/图片宽 * 100) %计算得出
3. 如果图片比例不对(要求是1:1, 实际是2:1), 会出现漏底色问题, 可以使用方案1绝对定位+高100%实现
4. 应用场景主要是弹性盒子容器内的图片显示

点击查看-等比例宽+高/宽比制作响应式图片

方案2只是比方案1少了一个用来"挤高"容器的标签, 看自己的应用场景选择

---

图片使用响应式后可以大大的提高用户体验, 并且会适合的请求图片, 不会存在多发请求的问题~

说个题外话, 发现AMP也是用padding来布局的, 但她有个问题是没有设置外容器的max-width:100%, 导致明明是个小图, 在AMP页面内确是满屏宽的, 导致心情不好, 抽空给AMP提个issues吧...

---

经 @小弟调调 大神提醒, "图片塌方"这个只是我自己这么叫她的, 反正意思就是这个...

发表于 2017年05月05日 01:11:53 ,添加在分类 前端技术 下 ,并被添加「 前端优化 自适应 响应式 图片 图片塌方 」标签 ,最后修改于 2017年05月05日 10:18:42