關於自適應圖片

img上面如今有這兩個屬性可使用srcset 和 sizes

<img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
srcset定義了咱們容許瀏覽器選擇的圖像集，以及每一個圖像的大小。在每一個逗號以前，咱們寫：一個文件名 (elva-fairy-480w.jpg.)一個空格圖像的固有寬度（以像素爲單位）（480w）——注意到這裏使用w單位，而不是你預計的px。這是圖像的真實大小，能夠經過檢查你電腦上的圖片文件找到（例如，在Mac上，你能夠在Finder上選擇這個圖像，而後按 Cmd + I 來顯示信息）。sizes定義了一組媒體條件（例如屏幕寬度）而且指明當某些媒體條件爲真時，什麼樣的圖片尺寸是最佳選擇—咱們在以前已經討論了一些提示。在這種狀況下，在每一個逗號以前，咱們寫：一個媒體條件（(max-width:480px)）——你會在 CSS topic中學到更多的。可是如今咱們僅僅討論的是媒體條件描述了屏幕可能處於的狀態。在這裏，咱們說「當視窗的寬度是480像素或更少」。一個空格
當媒體條件爲真時，圖像將填充的槽的寬度（440px）


通時還可使用<picture>元素
<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
 <source>元素包含一個media屬性，這一屬性包含一個媒體條件——就像第一個srcset例子，這些條件來決定哪張圖片會顯示——第一個條件返回真，那麼就會顯示這張圖片。在這種狀況下，若是視窗的寬度爲799px或更少，第一個<source>元素的圖片就會顯示。若是視窗的寬度是800px或更大，就顯示第二張圖片。srcset屬性包含要顯示圖片的路徑。請注意，正如咱們在<img>上面看到的那樣，<source>可使用引用多個圖像的srcset屬性，還有sizes屬性。因此你能夠經過一個 <picture>元素提供多個圖片，不過也能夠給每一個圖片提供多分辨率的圖片。實際上，你可能不想常常作這樣的事情。在任何狀況下，你都必須在 </picture>以前正確提供一個<img>元素以及它的src和alt屬性，不然不會有圖片顯示。當媒體條件都不返回真的時候（你能夠在這個例子中刪除第二個<source> 元素），它會提供圖片；若是瀏覽器不支持 <picture>元素時，它能夠做爲後備方案。
複製代碼