html - Chrome/FF 上 Srcset 的默认宽度

Question

我正在实现一个我们想要使用 srcset 的页面。问题是我希望图像以默认大小呈现，而不设置其宽度。

似乎这在 Chrome/FF 上是不可能的。令人惊讶的是 IE11 显示了这一点，因为我认为它应该..

看看这个例子：

<img src="http://www.komplett.no/img/p/200/F359034.jpg" srcset="http://www.komplett.no/img/p/200/F359034.jpg 200w,
                     http://www.komplett.no/img/p/200/F359034.jpg 200w ">

http://jsfiddle.net/goa3xu5f/

在这里，您会看到图像将采用尽可能多的宽度，即使图像要小得多。

如果你不设置 srcset 它加载它的初始大小：

<img src="http://www.komplett.no/img/p/200/F359034.jpg">

http://jsfiddle.net/g7j6fgd2/

我不知道这是否是一个错误，但有谁知道我如何使用 srcset 并且仍然将图像显示为原始大小而不是浏览器放大它？

Answer 1

这工作正常检查这个演示

<img src="http://upload.wikimedia.org/wikipedia/commons/c/c6/Russell_Falls_2.jpg" srcset="http://upload.wikimedia.org/wikipedia/commons/c/c6/Russell_Falls_2.jpg 1x, http://upload.wikimedia.org/wikipedia/commons/c/c6/Russell_Falls_2.jpg 2x">

Answer 2

我误解了尺寸规格的含义，现在我明白了为什么它会这样。我建议阅读此 https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

Answer 3

这是因为您需要设置sizes属性来告诉浏览器它应该显示的大小。

sizes现在是强制属性，但如果不存在，则默认值为100vw，表示视口的全宽。