自适应图片通常使用 srcset 属性实现。srcset 属性是一个逗号分隔列表，其中包含图片文件名及其宽度或密度描述符。
为防止布局偏移，请在使用 srcset 的 <img> 和 <source> 标记上设置 width 和 height 属性。
密度描述符
如需创建使用密度描述符的自适应图片，请执行以下操作：
src和srcset中列出的所有图片都应具有相同的宽高比。- 设置
width和height属性，以匹配1x图片的尺寸。 src属性应引用1x图片。
宽度描述符
要创建使用宽度描述符的自适应图片，请执行以下操作：
src和srcset中列出的所有图片的宽高比都应相同。width和height属性应与后备图片的尺寸一致。- 根据需要调整图片样式。在不使用 CSS 的情况下，如果您在具有宽度描述符的自适应图片上设置
width和height，则图片始终以设定的尺寸渲染。即使srcset中列出的图片具有不同的尺寸，也是如此。此行为可能不是您所希望的。向图片样式添加width: 100%; height: auto;或width: 100vw; height: auto;可能会获得您期望的视觉外观。
图片元素
如需创建自适应 <picture> 元素，请执行以下操作：
- 为所有
<source>标记设置width和height属性。这些属性的合适值取决于<source>标记如何使用srcset。 - 通过设置相应的
<img>标记样式来调整图片。<source>标记是一个空元素，因此样式没有任何影响。 - 在
<img>标记中设置width和height属性。这些值应与后备图片的固有尺寸相匹配。
示例
HTML
<!-- Using density descriptors -->
<img width="480" height="330"
srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
src="cat-1x.jpg"
alt="Photo of a cat on a green background">
<!-- Using width descriptors -->
<img width="256" height="128"
srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
src="dog-256w.jpg"
alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
<source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
<source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
<img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>