代码之家 › 专栏 › 技术社区 › Abram

如何在HTML5中正确使用图片srcset

srcset html5 html

Abram · 技术社区 · 6 年前

我已经设置了以下img srcset:

<img srcset="http://via.placeholder.com/320x150 320w,
             http://via.placeholder.com/480x150 480w,
             http://via.placeholder.com/800x150 800w"
        src="http://via.placeholder.com/800x150"
      sizes="(max-width: 320px) 280px,
             (max-width: 480px) 440px,
             800px"
      width="200" />

无论我如何设置img的宽度,或者如何调整窗口大小,chrome总是下载并显示800px宽的图像。给什么?添加“大小”属性也没有效果。我引用了这个 article .

http://jsfiddle.net/7ek62m13/1/

1 回复 | 直到 6 年前

Dennis Spierenburg 6 年前

您使用srcset的方式是正确的。Srcset用于在较小的设备上有较大的图像和较小的格式时。如果加载最大的图像,则无需加载另一个较小的图像(因为srcset用于相同的图像)。这将导致当您在手机上打开此代码时,它将显示最小的图像,但当您在桌面上时,它将打开常规图像。如果你再次升级浏览器,srcset会用更大的图像替换你的图像,但它永远不会换回更低的图像。我希望我说得更清楚一点。

推荐文章

Softly · 单选按钮未按预期取值

1 年前