如何实现响应式图片兼容pc和移动端

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

但是兼容不怎么好啊添加链接描述 查看属性兼容