在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

這工作精細檢查這個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"> 

Answer 2

我誤解了尺寸規格的意思，現在我明白爲什麼它的行爲就像這樣。我推薦閱讀這個 https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

Answer 3

這是因爲你需要設置sizes屬性來告訴瀏覽器應該顯示哪個尺寸。

sizes現在是一個強制屬性，但如果它不存在，默認值是100vw，這意味着視口的整個寬度。