ML 中使用
<picture>
<source media="(min-width: 768px)" srcset="large-image.jpg">
<source media="(min-width: 480px)" srcset="medium-image.jpg">
<img src="small-image.jpg" alt="An example image">
</picture>
注意,在每个
<picture>
:这个标签最好放在标签之前。 它包含0或多个
元素作为后备
<source>
:为<picture>
定义多个可选图片源,并根据显示条件选择要显示的图像。
media
:媒体查询规则可以使用CSS媒体查询从image srcset列表中选择哪个
srcset
:一个用逗号分隔的一系列源+大小对的列表,在过去,这些大小可能是像素密度描述符,但现在更常见的是宽度(或布局决策)
<img>
:最终后备图片,如果没有满足条件的source元素。
需要注意的是,标签中包含 src 属性和 alt 属性,以确保用户可以看到有意义的内容。