开发者社区> 问答> 正文

知道img的srcset的作⽤是什么?(追问)

知道img的srcset的作⽤是什么?(追问)


【精品问答】前端面试手册

【精品问答】前端面试手册之HTML篇

展开
收起
前端问答 2019-12-15 16:40:41 1031 0
1 条回答
写回答
取消 提交回答
  • 前端问答小助手

    可以设计响应式图⽚,我们可以使⽤两个新的属性srcset 和 sizes来提供更多额外的资源图像和提示,帮助浏览器选择正确的⼀个资源。

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

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

    所以,有了这些属性,浏览器会: - 查看设备宽度 - 检查 sizes 列表中哪个媒体条件是第⼀个为真 - 查看给予该媒体查询的槽⼤⼩ - 加载 srcset 列表中引⽤的最接近所选的槽⼤⼩的图像

    srcset提供了根据屏幕条件选取图⽚的能⼒

    <img src="clock-demo-thumb-200.png"
    alt="Clock"
    srcset="clock-demo-thumb-200.png 200w,
    clock-demo-thumb-400.png 400w"
    sizes="(min-width: 600px) 200px, 50vw">
    
    2019-12-15 16:42:38
    赞同 1 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载