Question

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

在这种情况下，我的图片为300px，浏览器应选择300px图片。但是，它正在拍摄1024px的图像。

<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/

Answer 1

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

未指定“尺寸”时，SRCSET加载的尺寸不正确

1 个答案: