如何实现响应式图片兼容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

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