CSS怎么實現響應式圖像顯示

這篇文章主要介紹“CSS怎么實現響應式圖像顯示”，在日常操作中，相信很多人在CSS怎么實現響應式圖像顯示問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS怎么實現響應式圖像顯示”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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

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

它是如何工作的呢？

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

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

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

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

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

首先看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，不過在后端代碼中增加這通常不是問題。

到此，關于“CSS怎么實現響應式圖像顯示”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！