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

2017-09-08 18:55:00 3268 2 编辑:Monster 来源:HTML5开发

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


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

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

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通