純CSS（無 JavaScript）實現的響應式影像顯示

oschina發表於2013-10-24
CSSJavaScript

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

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

　　它是如何工作的呢？

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

　　什麼？？HTML文件中能嵌入了CSS?

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

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

　　程式碼展示

　　下面是可以執行的所有程式碼。

　　HTML

　　首先看HTML。

<span class="magik-responsive-image" id="image-01">
<img src="http://dummyimage.com/200x150/cdcdcd/000/?text=lo-res" alt="TODO">
<style scoped>
@media screen and (min-width: 701px){#image-01{background-image:url(http://dummyimage.com/1600x1200/dcdcdc/000/?text=hi-res);}}
</style>
</span>

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

.magik-responsive-image {
background-repeat: no-repeat;
background-size: 100%;
display: block;
position: relative;
}

.magik-responsive-image img {
max-width: 100%;
}

@media screen and (min-width: 701px) {

.magik-responsive-image img{
opacity: 0;
}
}

　　好處

  • 沒有JavaScript
  • 實現起來簡單
  • 還可用於視訊（我將在以後的部落格文章中發表有關這方面的內容）

　　缺點

  • 在桌面環境下，需要向伺服器傳送兩個請求
  • <style>標籤的scoped睡醒在主要的瀏覽器裡仍然沒有得到支援。正是由於這個原因，我們才需要增加一個id，不過在後端程式碼中增加這通常不是問題。

　　演示

　　看看 這個展示 。

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

相關文章