如何在html中爲任何移動設備設置圖像

Question

現在的問題是：不同的智能手機有不同的顯示分辨率。

有例如840x560,480x320或800x480。

爲了讓「每一個」現代智能手機中的圖像適合顯示器，我需要寫些什麼元標記，CSS等等？

我希望我的關注很清楚。

Answer 1

IMG {最大寬度：100％;}

會做的伎倆

Answer 2

要定位你應該使用@media查詢具體的屏幕尺寸。 Plus background-size: cover;將使您的圖像適合.block容器。

參見：https://developer.mozilla.org/en-US/docs/CSS/background-size

@media screen and (max-width: 840px) { 
    .block { 
     display: block; 
     width: 100%; 
     height: 100%; 
     background: url(/path/to/image) no-repeat center center transparent; 
     background-size: cover; 
    } 
}