响应式图片
阐述
是指在不同的设备上显示不同分辨率和不同格式的图片的方法。
通过 <img srcset> 属性
可以 在 <img> 标签上的 srcset 上设置多个 URL 和相应的分辨率来实现。
通过 <picture> 和 <source> 标签
在 <picture> 中我们可以包括多个 <source> 指定不同格式的图片来源。
- 嵌入的
<img>标签应该仍然用于样式 <picture>可以视为一个类似于<span>的容器，可以用于 CSS 弹性盒布局
实例
使用 <img srcset>
<img
alt=""
src="/cfj-mats/responsive-diamond.png"
srcset="
/cfj-mats/responsive-diamond.png 1x,
/cfj-mats/responsive-diamond@2x.png 2x,
/cfj-mats/responsive-diamond@3x.png 3x
"
/>
使用 <picture>
<picture>
<source
type="image/avif"
srcset="
/cfj-mats/responsive-diamond.avif 1x,
/cfj-mats/[email protected] 2x,
/cfj-mats/[email protected] 3x
"
/>
<source
type="image/webp"
srcset="
/cfj-mats/responsive-diamond.webp 1x,
/cfj-mats/[email protected] 2x,
/cfj-mats/[email protected] 3x
"
/>
<img
alt=""
src="/cfj-mats/responsive-diamond.png"
/>
</picture>