這篇文章是圖片響應(yīng)式解決方案的子文章绑蔫，屬于實驗性質(zhì)运沦。
這篇文章將解決兩個問題：
- 瀏覽器是否是根據(jù)w值來選擇圖片的，是如何選擇的？
- 如果w值與圖片真實寬度不一致，又會出現(xiàn)哪些問題袍睡？
最開始的時候我是理解w標志代表可渲染的位圖寬度的，那么是這樣么烈掠？做個測試
我將test-480.jpg 480w改為了450w,
<img class="image" src="test-240.jpg" srcset="test-240.jpg 240w, test-480.jpg 450w, test-720.jpg 720w sizes="240px">
如果w代表該圖片的位圖寬度的話，在dpr==2的設(shè)備上最多可渲染480px寬的位圖
而且還發(fā)現(xiàn)256/240==480/450缸托，這個結(jié)果到底說明什么呢左敌？先不管，繼續(xù)大膽假設(shè)小心驗證俐镐。然后我們再實驗（將720px寬的圖片后的w改為了480）：
<img class="image" src="test-240.jpg" srcset="test-240.jpg 240w, test-480.jpg 450w, test-720.jpg 480w" sizes="240px">
發(fā)現(xiàn)通過修改w標志真的是可以欺騙瀏覽器去選擇我們指定的圖片的矫限。也就是將w理解為該圖片的位圖寬度是沒有問題的。
那么再回到上一個測試佩抹，考慮：根據(jù)w值叼风，在沒有恰好合適的圖片選擇的情況下，瀏覽器會怎么做出決策呢棍苹？繼續(xù)試驗：在多次測試時發(fā)現(xiàn)无宿，在該情況下， test-480.jpg 對應(yīng)的w在320和321之間是個分水嶺枢里。
<img class="image" src="test-240.jpg" srcset="test-240.jpg 240w, test-480.jpg 320w, test-720.jpg 720w" sizes="240px">
<img class="image" src="test-240.jpg" srcset="test-240.jpg 240w, test-480.jpg 321w, test-720.jpg 720w" sizes="240px">
480X1.5=720孽鸡，480/1.5=320,那么也就是瀏覽器是根據(jù)類似于等比數(shù)列而不是等差數(shù)列去做出選擇的。也就是當沒有正好寬度的圖片時栏豺，瀏覽器會根據(jù)sizes和dpr計算出正確解彬碱，然后向拉伸或者壓縮的方向以百分比的形式向外擴展，直至獲得最優(yōu)解奥洼。另外堡妒，當最優(yōu)解有兩個且分別是一個是要拉伸一個要壓縮，那么會選擇數(shù)值較大的那張圖片溉卓。
那么對于下面這個情況，也就能預(yù)測瀏覽器會選擇哪張圖片來展示：因為320w和720w距離480px是一樣近的搬泥。721w肯定就更遠一些了桑寨。
<img class="image" src="test-240.jpg" srcset="test-240.jpg 240w, test-480.jpg 320w, test-720.jpg 721w" sizes="240px">
結(jié)果支持我們的判斷。
好了忿檩，折騰這么多尉尾，我們終于可以下一個結(jié)論，w是對該圖片寬度的描述燥透，而且這會直接影響到瀏覽器對于圖片的選擇沙咏，瀏覽器選擇的標準就是根據(jù)sizes和dpr計算所得準確值在w值增大和減小的兩個方向上選擇一個比值（永遠是大數(shù)/小數(shù)）更小的一個圖片顯示辨图。
還記得上面遺留的問題么？就是圖片顯示寬度并不是240px的情況肢藐。
拿離我們最近的上面這個圖片來做一個解釋：瀏覽器選擇的是這個test-480.jpg 320w故河，根據(jù)320w,瀏覽器就會認為圖片的寬度就是320px寬，此時的正確值是480吆豹，那么瀏覽器是要把320px的圖片拉伸到480px寬鱼的，也就是寬度擴大480/320=1.5倍，來使得在dpr=2的屏上顯示寬度為240px痘煤。但是圖片的實際寬度是480凑阶，所以最終的展示寬度就變成了480X1.5/2=360。所以衷快，可以補充一點宙橱，當你給照片添加的w值不準確時也是會導(dǎo)致圖片展示寬度變化的。
