爲什麼不是srcset選擇較小的圖像更接近視口尺寸

<img src="/images/photo-236x61.png" srcset="/images/photo-170x44.png 170w, 
/images/photo-236x61.png 236w, 
/images/photo-300x72.png 300w, 
/images/photo-472x121.png 472w, 
/images/photo-600x154.png 600w, 
/images/photo-943x242.png 943w" 
sizes="(min-width: 1341px) 450px, 
(min-width: 1181px) 400px, 
(min-width: 961px) 350px, 
(min-width: 881px) 325px, 
(min-width: 801px) 300px, 
(min-width: 721px) 250px, 
(min-width: 561px) 220px, 
(min-width: 481px) 200px, 
(min-width: 401px) 170px, 
(min-width: 321px) 150px, 
(min-width: 160px) 130px, 
calc(100vw - 30px)" alt="My Photo">

我有上面的圖像，根據設計師如何接線的東西，作爲一個不同大小的公平數。但是，我遇到了一些奇怪的問題，其中srscset總是希望選擇比所需更大的圖像。例如，當視口寬度爲420像素時，它將選取300px寬度的圖像，而不是較小的那些圖像，這些圖像與所提供的srcset寬度更接近。不知道爲什麼查詢不會導致它在不同情況下選擇正確的大小。任何人有任何想法如何知道瀏覽器選擇什麼，爲什麼？爲什麼不是srcset選擇較小的圖像更接近視口尺寸

來源

2017-08-14 R. Burn

srcset定義圖像列表和每個圖像的大小（圖像的實際大小）。該指令允許瀏覽器在它們之間進行選擇。

尺寸定義了一組媒體條件（例如屏幕寬度），並且指示哪些圖像尺寸將是最好的選擇，當一定的媒體條件都爲真。

大小規則的順序很重要，因爲瀏覽器在第一次匹配條件後會忽略所有內容，所以我認爲這裏的問題應該是順序。

當視口是在420PX寬，第一尺寸條件告訴：「當視口寬度爲1341個像素或更少負載在srcset列表所選擇的時隙大小最緊密匹配參考的圖像（450像素）」。

這種情況是真正的終端的話，瀏覽器會選擇srcset圖像：/images/photo-300x72.png 300w匹配尺寸是條件。

這是關於響應式圖像如何工作的useful article。

來源

2017-09-03 11:58:04 Lety

部分原因可能是它，但經過多次閱讀後，它會出現它是觸發它選擇較大圖像的像素密度。像手機這樣的小型設備在某些情況下通常具有比例2甚至3的像素密度。這意味着手機的像素寬度僅爲400px，其密度爲2，因此它會轉向800px寬度的圖像，以便它可以呈現更清晰的圖像。似乎如果我想強制一個更小的圖像超出某些媒體查詢im更好地使用圖片元素。 –

是的，你說的是真實的，一旦訂單得到糾正，它就像你描述的一樣。瀏覽器選擇最接近寬度*像素密度的圖像，並將其大小調整爲匹配尺寸規則中指示的寬度。 – Lety

爲什麼不是srcset選擇較小的圖像更接近視口尺寸

回答

相關問題