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

2019-11-14 20:34:21

字體：大中小

來源：轉載

供稿：網友

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

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

　　它是如何工作的呢？

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

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

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

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

　　代碼展示

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

　　HTML

　　首先看HTML。

<span class="magik-responsive-image" id="image-01">
<img src=" 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;
}
}