[html] 第77天 说说你对HTML5的img标签属性srcset和sizes的理解？都有哪些应用场景？
haizhilin2013 opened this issue · comments
第77天 说说你对HTML5的img标签属性srcset和sizes的理解？都有哪些应用场景？
- sizes 属性规定被链接资源的尺寸。只有当被链接资源是图标时 (rel="icon")，才能使用该属性。
- srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。可以适应不同屏幕，加载不同大小的图片。
在类似七牛这样的图像存储服务都有缩放裁切功能的情况下，这两个属性就是渣
srcset：规定了图片的src候选集;sizes：规定了图片在不同条件下的尺寸取值，根据尺寸取值从srcset中找到对应的图片src；配合srcset属性才能使用；
如果没有设置srcset属性，或者没值，那么sizes属性也将不起作用。——MDN
应用场景：多用于响应式图片或不同像素密度设备的图片适配；
@xxf1996 "配合sizes属性才能使用" 这句表述不对吧，没有资料显示需要配合。张鑫旭文章里的第一个demo：
<img src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 1x, mm-width-256px.jpg 2x">
应该是 sizes 需要配合候选集 srcset 使用
@xxf1996 "配合sizes属性才能使用" 这句表述不对吧，没有资料显示需要配合。张鑫旭文章里的第一个demo：
<img src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 1x, mm-width-256px.jpg 2x">应该是
sizes需要配合候选集srcset使用
是的，应该是sizes依赖srcset属性；
- img 元素的 srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。
<img src="1.jpg " srcset="2.jpg 1440w, 3.jpg 800w" />
当浏览器宽度为1440时显示2.jpg，浏览器宽度为800时显示3.jpg
- sizes 和 srcset 用法差不多
可恶，又在mdn和回答里沉迷自我
这群贤弟，放一下愚兄多年前写的blog吧。
https://blog.csdn.net/qq_35534823/article/details/69388430
这群贤弟，放一下愚兄多年前写的blog吧。
https://blog.csdn.net/qq_35534823/article/details/69388430
原来优秀的人很早就优秀了！
@jiamianmao 膜拜大神，通俗易懂