自适应图片通常使用 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属性：width和height的相应值取决于<source>标记如何使用srcset。（有关如何使用srcset的信息，请参阅上文。） - 调整图片样式：如果您需要调整图片样式，请注意，向
<source>标记添加样式不会产生任何影响 -<source>标记是一个空元素。 您需要改为设置相应的<img>标记的样式。 - 在
<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>