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

在响应式布局中，通常图片自适应是没法带上宽度和高度的，或者是需要使用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.<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少了一个用来"挤高"容器的标签, 看自己的应用场景选择

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

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