HTML 响应式图片
学习 picture 和 srcset 实现响应式图片 · 难度：进阶 · +15XP
HTML 响应式图片完整指南
响应式图片根据设备屏幕自动选择最佳图片，节省流量提升性能。
srcset属性
<img src="small.jpg" srcset="medium.jpg 768w,large.jpg 1200w" sizes="(max-width:768px)100vw,50vw" alt="响应式图片">picture元素
<picture>
<source media="(min-width:768px)" srcset="large.jpg">
<source media="(min-width:480px)" srcset="medium.jpg">
<img src="small.jpg" alt="后备图片">
</picture>srcset vs picture
| srcset | picture |
|---|---|
| 同图不同分辨率 | 不同图(艺术方向) |
| 浏览器自动选择 | 精确控制 |
???? 练习
- 实现分辨率切换
- 实现横竖版切换