Chrome/FF 上 Srcset 的默认宽度答案

【问题标题】：Default width with Srcset on Chrome/FFChrome/FF 上 Srcset 的默认宽度
【发布时间】：2015-05-19 14:01:26
【问题描述】：

我正在实现一个我们想要使用 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 并且仍然将图像显示为原始大小而不是浏览器放大它？

【问题讨论】：

标签： html dom srcset

【解决方案1】：

这工作正常检查这个DEMO

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

【讨论】：

这不一样。您使用基于分辨率的srcset，而@Numm3n 使用基于视口的srcset。

【解决方案2】：

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

【讨论】：

【解决方案3】：

这是因为您需要设置sizes 属性来告诉浏览器它应该以什么尺寸显示。

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

【讨论】：