Skip to content
登录后刷题更便捷

为什么在`<img>`标签中使用`srcset`属性?请描述浏览器遇到该属性后的处理过程。

难度:

因为需要设计响应式图片。我们可以使用两个新的属性——srcsetsizes——来提供更多额外的资源图像和提示,帮助浏览器选择正确的一个资源。

srcset 定义了我们允许浏览器选择的图像集,以及每个图像的大小。

sizes 定义了一组媒体条件(例如屏幕宽度)并且指明当某些媒体条件为真时,什么样的图片尺寸是最佳选择。

所以,有了这些属性,浏览器会:

  1. 查看设备宽度
  2. 检查 sizes 列表中哪个媒体条件是第一个为真
  3. 查看给予该媒体查询的槽大小
  4. 加载 srcset 列表中引用的最接近所选的槽大小的图像
参考

内容仅供参考,难免有不恰当的地方,如果有问题欢迎及时反馈
部分内容来自网络,如果不慎侵犯您的权益,请联系我们,以便及时删除侵权内容