HTML 响应式图片

学习srcset/picture · 难度：进阶 · +15XP

HTML 响应式图片 srcset

根据屏幕宽度和像素密度加载最合适的图片。

srcset + sizes

<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">
  <img src="small.jpg" alt="pic">
</picture>

srcset vs picture

???? 练习

1. 用srcset实现分辨率切换
2. 用picture实现横竖版图片切换