爲什麼srcset調整圖像大小？

Question

我有一個奇怪的行爲使用srcset，我很難理解它。我已經做了一個CodePen：http://codepen.io/anon/pen/dYBvNM

問題是，我有一組圖像（即Shopify生成）的各種尺寸：240px，480px，600px和1024px。問題是這些是最大尺寸。這意味着如果商家上傳較小的圖片（比方說600px），1024px版本將是600px，而不是1024px。我不知道，在前進，所以我不得不簡單地添加所有的大小爲「最好情況」：

<img 
    src="my_1024x1024.jpg" 
    srcset="my_240px.jpg 240w, my_480px.jpg 480w, my_600px.jpg 600w, my_1024px 1024w" 
    sizes="(max-width: 35em) 100vh, 610px" 
    > 

當圖像確實比預期的最大尺寸的怪事發生。當這種情況下，瀏覽器正確選擇適當的圖像（在這種情況下，它會選擇在15'視網膜上的1024版本），但由於圖像實際上小於1024像素（我指出的大小），瀏覽器實際上是將圖像的大小調整爲小於其原始分辨率。

您可以在CodePen http://codepen.io/anon/pen/dYBvNM中比較這兩幅圖像是1024像素的版本，但在使用srcset的版本中，渲染實際上比僅使用src小。我本來預料到它會以原始分辨率留下圖像。

你能解釋一下爲什麼這樣做？

謝謝！

Answer 1

它的工作方式是通過將給定值除以sizes屬性的有效大小，將'w'描述符計算爲'x'描述符。因此，例如，如果選擇1024瓦，尺寸爲610像素，則1024/610 = 1.67868852459016x，這就是瀏覽器將應用的圖像的像素密度。如果圖像實際上不是1024像素寬，則瀏覽器仍將應用相同的密度，這將「縮小」圖像，因爲在圖像寬度和'w'描述符匹配的有效情況下這是正確的。

您必須使描述符與資源寬度匹配。當用戶上傳圖像時，可以檢查其寬度並將其用作sizes中的最大描述符（如果它小於1024），並刪除大於給定圖像寬度的描述符。