Fe-interview: [html] 第77天 说说你对HTML5的img标签属性srcset和sizes的理解？都有哪些应用场景？

[haizhilin2013]

第77天 说说你对HTML5的img标签属性srcset和sizes的理解？都有哪些应用场景？

[DBTXf]

• sizes 属性规定被链接资源的尺寸。只有当被链接资源是图标时 (rel="icon")，才能使用该属性。
• srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。可以适应不同屏幕，加载不同大小的图片。

[AdonLee]

在类似七牛这样的图像存储服务都有缩放裁切功能的情况下，这两个属性就是渣

[xxf1996]

• srcset：规定了图片的src候选集;
• sizes：规定了图片在不同条件下的尺寸取值，根据尺寸取值从srcset中找到对应的图片src；配合srcset属性才能使用；
  > 如果没有设置srcset属性，或者没值，那么sizes属性也将不起作用。——MDN

应用场景：多用于响应式图片或不同像素密度设备的图片适配；

参考文档：响应式图片srcset全新释义sizes属性w描述符

[w3cmark]

@xxf1996 "配合sizes属性才能使用" 这句表述不对吧，没有资料显示需要配合。张鑫旭文章里的第一个demo：

<img src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 1x, mm-width-256px.jpg 2x">

应该是 sizes 需要配合候选集 srcset 使用

[xxf1996]

@xxf1996 "配合sizes属性才能使用" 这句表述不对吧，没有资料显示需要配合。张鑫旭文章里的第一个demo：

<img src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 1x, mm-width-256px.jpg 2x">

应该是 sizes 需要配合候选集 srcset 使用

是的，应该是sizes依赖srcset属性；

[yxkhaha]

• img 元素的 srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。

<img src="1.jpg " srcset="2.jpg 1440w, 3.jpg 800w" />
当浏览器宽度为1440时显示2.jpg，浏览器宽度为800时显示3.jpg

• sizes 和 srcset 用法差不多

[lookguy]

可恶，又在mdn和回答里沉迷自我

[jiamianmao]

这群贤弟，放一下愚兄多年前写的blog吧。
https://blog.csdn.net/qq_35534823/article/details/69388430

[haizhilin2013]

这群贤弟，放一下愚兄多年前写的blog吧。
https://blog.csdn.net/qq_35534823/article/details/69388430

原来优秀的人很早就优秀了！

[zhuyuedlut]

@jiamianmao 膜拜大神，通俗易懂