有許多方法可以實現web頁面里圖像的應答。然而，我碰到的所有方案都使用了javaScript。這使我疑惑不用Javascript實現圖像響應是否可行。

　　我提出了下面純CSS的方案。

　　它是如何工作的呢？

　　我把<img>標簽防止在<span>內。src屬性將從服務器獲得手機版本的圖像。接著我還在<span>元素內部包含了一點CSS。

　　什么？？HTML文檔中能嵌入了CSS?

　　是的，只要你增加了scoped屬性，這就在HTML5里就是非常有效的。在這個CSS里，我從某個斷點開始用了@media查詢把作為背景的高清圖像添加到<span>里。 在下面這段代碼里，我只添加了一個斷點，然而你當然可以按你喜歡的增加許多。

　　通過使用背景圖像指示符，只有在需要的時候才會從服務器獲取這個圖像。也就是說，只有在media查詢滿足的時候才能獲取到。<img>將確保<span>有正確的高寬比，這樣<span>上的背景圖像才能得到正確的現實。

　　代碼展示

　　下面是可以運行的所有代碼。

　　HTML

　　首先看HTML。

　　CSS 我們還需要對CSS最一點修改，以便在應當顯示高清圖像的時候隱藏低清晰度的圖像。技巧是增加backgroud-size:100%;這使得在維護高寬比不變的情況下伸展背景。

　　好處

• 沒有JavaScript
• 實現起來簡單
• 還可用于視頻（我將在以后的博客文章中發表有關這方面的內容）

　　缺點

• 在桌面環境下，需要向服務器發送兩個請求
• <style>標簽的scoped睡醒在主要的瀏覽器里仍然沒有得到支持。正是由于這個原因，我們才需要增加一個id，不過在后端代碼中增加這通常不是問題。

　　演示

　　看看 這個展示 。

　　原文地址：pure-css-responsive-images-yes-javascript