时间戳

首页 > 解决方案 > 未指定“大小”时 SRCSET 加载不正确的大小

html - 未指定“大小”时 SRCSET 加载不正确的大小

问题描述

根据文档，当sizesimage 属性中未指定时，浏览器应根据 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/

标签： htmlcsssrcset

解决方案

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

推荐阅读