未指定“大小”时 SRCSET 加载不正确的大小答案

【问题标题】：SRCSET loading incorrect size when "sizes" is not specified未指定“大小”时 SRCSET 加载不正确的大小
【发布时间】：2019-11-07 14:37:55
【问题描述】：

根据文档，当图像属性中未指定sizes 时，浏览器应根据 css 渲染自动计算所需的大小。

在这种情况下，我的图像是 300 像素，浏览器应该选择 300 像素的图像。但是，它采用的是 1024 像素的图像。

<html>
  <div style="width:300px">
    <img
      width="100%"
      src="https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-560x336.jpg"
      class="attachment-csco-medium-alternative size-csco-medium-alternative wp-post-image"
      alt=""
      srcset="
    https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-300x200.jpg   300w,
    https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-380x253.jpg   380w,
    https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-768x512.jpg   768w,
    https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-800x533.jpg   800w,
    https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-1024x683.jpg 1024w,
    https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-1160x773.jpg 1160w.
    https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds.jpg          1500w,
    "
    />
  </div>
</html>

https://jsfiddle.net/khsyLxdr/

【问题讨论】：

标签： html css srcset

【解决方案1】：

我相信您错误地实现了语法。最后的（数字）w。尝试将其更改为 1X、2X 等。您是否还尝试在 CSS 上指定所需的大小？请记住，除非您修改其属性，否则 HTML 将按原样显示图像。

【讨论】：