> 譯文出處：http://www.w3cplus.com/responsive/responsive-images-101-part-4-srcset-width-descriptors.html > 英文原文：http://blog.cloudfour.com/responsive-images-101-part-4-srcset-width-descriptors/ 在[響應式圖片101系列教程](http://www.w3cplus.com/blog/tags/509.html)中的[第三篇中](http://www.w3cplus.com/responsive/responsive-images-101-part-3-srcset-display-density.html)，我們學習了顯示密度描述，并且總結出它們適合用于固定寬度圖片，但是對于自適應圖片有所不足。 伸縮使圖片就需要用到`srcset`的寬度描述符。 ## 寬度描述符 寬度描述符的語法與屏幕密度描述符類似。`srcset`屬性值是逗號分隔的圖片源和描述列表。  區別在于不是用`1x`,`2x`或其他值來表示密度，我們列出了圖片源的寬度例如`320w`，`480w`等。 ~~~ <img src="cat.jpg" alt="cat" srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w"> ~~~ 圖片源的寬度會讓人很困惑。寬度描述符會根據分辨率來尋找圖片源文件。 換句話說如果在一個圖片編輯器中打開一張圖片，它的分辨率是多少呢？獲取圖片的寬度放置在`srcset`屬性中。 ## 瀏覽器選擇最佳圖片資源 當使用寬度描述符，你給瀏覽器提供了一系列圖片以及它們的真實寬度,因此瀏覽器可以選擇最佳圖片源。瀏覽器是怎么做的呢？ 你的第一反應一定是瀏覽器檢查頁面上元素的尺寸并與圖片列表尺寸對比。這有點道理，但實際上并不是這樣。 我們來看，當瀏覽器開始下載圖片時，通常它并不知道頁面中圖片的尺寸。 ## 瀏覽器預加載和合理資源下載 如果查看瀏覽器渲染頁面的時間線，你會發現一些引人注目的事情。  就在瀏覽器下載HTML后不久，它繼續請求CSS和JavaScript。但是在CSS和JavaScript完成下載前，瀏覽器開始下載圖片。 因為CSS和JavaScript都沒下載完成，瀏覽器下載圖片時并不知道頁面布局。由于不知道布局，它就不知道圖片元素的尺寸。 順帶一提，預加載行為正是為什么[我們不能用CSS或JavaScript解決內聯響應式圖片的原因](http://www.brucelawson.co.uk/2015/why-we-cant-do-real-responsive-images-with-css-or-javascript/)。在瀏覽器開始下載時它們還不可用。 瀏覽器唯一知道的是視窗尺寸。一旦我們過渡到了顯示密度選擇符，一切都與視窗尺寸緊緊相關。 ## 為什么影響呢？ 視窗是真實圖片尺寸的抽象替代品。用[Walmart’s Grocery](http://delivery.walmart.com/)頁面上的圖片作為例子：  在小視窗下，圖片幾乎和視窗寬度尺寸相同。 然而在大屏幕中，情況不同：  在第二個例子里，視窗寬度為`1540px`，但是圖片寬度只有`254px`。知道視窗尺寸不足以給瀏覽器提供選擇合適圖片源的信息。 ## 尺寸屬性來解決! 我們如何讓瀏覽器知道頁面中的圖片尺寸，從而讓瀏覽器可以在`srcset`列表中下載正確的圖片呢？如何使用圖片尺寸屬性，歡迎閱讀本系列教程的第五部分——**圖片尺寸**！