如何在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; 
    } 
}