html中的响应式图片
-
img
sizes 指定屏幕尺寸
srcset 指定可以使用的图片和大小,多个使用逗号分隔,需要指定图片的真实宽度,个人觉得没有picture好用
<img
sizes="(min-width: 1200px) 680px, (min-width: 640px) 500px, 300px"
srcset="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549557630523&di=2513b0fcc78a65820a90319ccff64abc&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsports%2F2_img%2Fsipaphoto%2F49d350e9%2F20171027%2FJlH_-fynfvfi1121420.jpg 680w"
alt=""> -
picture
<picture>
<source media="(min-width: 1200px)" srcset="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549557630523&di=2513b0fcc78a65820a90319ccff64abc&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsports%2F2_img%2Fsipaphoto%2F49d350e9%2F20171027%2FJlH_-fynfvfi1121420.jpg" />
<source media="(min-width: 680px)" srcset="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549558311010&di=3f5e401100be857a9d7b13058d59d0b3&imgtype=0&src=http%3A%2F%2Fimg3.redocn.com%2F20120322%2FRedocn_2012031914403578.jpg" />
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3932493901,3759456434&fm=26&gp=0.jpg" style="width: auto;" alt="">
</picture>