web图片响应式自适应结合懒加载的最佳方案

文章目录

• 方案1. 使用固定宽+图片比例处理响应式
• 方案2. 使用绝对宽+高/宽比制作响应式图片

在响应式布局中，通常图片自适应是没法带上宽度和高度的，或者是需要使用JavaScript来计算出它的合适宽高，而且在使用懒加载时，我们会默认给一个占位图片，一个占位图片在各种不同宽高的图片里面，是会严重变形，有没有更好的处理方法呢？

现在网上的懒加载都存在这种问题，因为懒加载的原理是开始默认请求一个比较小的图片替换原图，等滚动到图片当前位置时才显示原图，而占位图有些是没有设置宽高，导致滚动到图片的位置不对，可能会有闪动挤压的效果，或者发生多次请求计算。

有些图片占位图直接设置宽高为原图大小。这也会产生两个问题：1.占位图严重变形，影响阅读体验；2.在图片大于外容器时，图片的宽高无法自适应，一个可能设置max-width:100%时出现变形，一个是通过JavaScript来解决这个问题，重置图片的宽高。

今天分享一篇来自前端小武的文章：图片塌方和图片响应式研究，看看他的解决方案，里面主要用到了一个思想就是padding-bottom等于父容器的宽/高x100%。解决方案有两种。

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

点击查看-等比例宽+高/宽比制作响应式图片（多图，慎入）

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

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

以后如果继续使用到图片自适应和懒加载相关的，可以尝试以上方案。