1.可以通过js或者服务器端,
<script>
//ready 在文档加载后激活函数
$(document).ready(function(){
function getwidth(){
var width=$(window).width();//获取屏幕宽度
var img=$(".img");//获取节点
if(width<=480){
img.attr("src","./img/480.png")//赋值路径
}else if(width<=800){
img.attr("src","./img/800.png")//赋值路径
}
}
$(window).on("resize load",getwidth)
})
</script>
2.srcset
<img src="./img/1.png"
srcset="./img/2.png 480w,./img/3.png 600w,./img/4.png 900w"
>
//前面的是路径 后面的是多少宽度的时候选择哪个图片
3.srcset配合sizes
<img src="./img/1.png"
srcset="./img/2.png 480w,./img/3.png 600w,./img/4.png 900w"
sizes="(min-width:800px) calc(100vh - 30rem),100vh"
>
4.picture
<picture>
<source media="(max-width:36rem)"
srcset"./img/1.png 768w"
>
<source media="(orientation:landscape)" //横屏查询
srcset"./img/2.png 768w"
>
</picture>
5.svg
但是兼容不怎么好啊添加链接描述 查看属性兼容