如何实现响应式图片

101 阅读 0 评论 67 点赞

我是靠谱客的博主自信咖啡，这篇文章主要介绍如何实现响应式图片，现在分享给大家，希望可以做个参考。

记录几种实现响应式图片的方法。

一.,js或服务端

通过js或者服务端来控制图片的加载，原理就是跟踪window的resize事件，然后修改图片的路径，代码如下

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
<div class="content">
<img src="" alt=""/>
</div>
<script src="js/vendor/jquery.min.js"></script>
<script>
$(document).ready(function () {
function makeImageResponsive() {
var width = $(window).width;
var img = $(".content img");
if (width <= 480) {
img.attr('src', 'img/480.png')
} else if (width <= 800) {
img.attr('src', 'img/800.png')
} else {
img.attr('src', 'img/1600.png')
}
}
$(window).on('resize load', makeImageResponsive());
})
</script>
</body>

这种形式还有一种类似的变种，就是通过把屏幕或者设备信息写入cookie，获取图片的时候在服务器端选择返回哪种图片，这样就不需要我们来写脚本了。

二，srcset

通过js或服务端加载确实可以达到响应式图片的目的，兼容性也非常的好，但是需要我们编码实现响应式的逻辑，在修改的时候也不是很方便属于命令式的实现，以下方法使用声明式的实现，就是把图片的地址声明在html中，由浏览器自行来决定如何加载，这样更加灵活，把展示的逻辑从硬编码中分离出来，降低了耦合。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html, * {
margin:0;
padding:0;
}
.content {
width:100%;
margin:0 auto;
}
.content img {
display: block;
width:100%;
max-width: 100%;
}
</style>
</head>
<body>
<div class="content">
<img class="image" src="img/480.png"
srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"/>
</div>
</body>

设置srcset属性后浏览器会根据我们的页面不同，从当前的浏览环境进行感知，然后选择一个图片进行加载。当超过480时，加载的图片变成了800，当超过800时，图片变成了1600。但当我们把屏幕变小时，图片始终是1600，是因为浏览器已经在大的分辨率下加载了大的图片，那么会被默认放在缓存中，使用大的图片不再会有网络消耗，当然使用更大的图片更好咯。

三，sizes

前面的第二种方法单独使用的话会有一个坑，就是例如当img的宽度只占50%，当我们加宽宽度的时候，加宽到480，但此时图片的宽度只有240，图片仍然变成了800。这时srcset属性就还需要配合sizes属性进行使用（第二种方法的sizes属性值默认为100vw）。

复制代码

1
2
3
4
5
<div class="content">
<img class="image" src="img/480.png"
srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"
sizes="50vw"/>
</div>

sizes属性内还可以写入媒体查询，例如

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<style>
html, * {
margin:0;
padding:0;
}
.content {
width:100%;
margin:0 auto;
}
.content img {
display: block;
max-width: 100%;
}
</style>
</head>
<body>
<div class="content">
<img class="image" src="img/480.png"
srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"
sizes="(min-width:800px) 800px, 100vm"/>
</div>

就是当浏览器宽度小于800时，按照100vw来设置图片；但超过800时，就是定宽了。

四，picture标签

复制代码

1
2
3
4
5
6
7
<div class="content">
<picture>
<source media="(max-width:36em)" srcset="img/tiananmen-s.jpg 768w"/>
<source srcset="img/tiananmen.jpg 1800w"/>
<img class="image" src="img/tiananmen.jpg"/>
</picture>
</div>

浏览器会遍历picture内的source设置，直到找到满足当前环境的media，就将此source的srcset赋值给img属性。当然它的具体用法自行百度去啦。

五，svg