javascript - 如何在 html 中为任何移动设备设置图像

Question

现在的问题是：不同的智能手机有不同的显示分辨率。

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

我必须写什么作为元标记、css 等以使“每部”现代智能手机中的图像适合显示器？

我希望我的担忧得到了清楚的描述。

Answer 1

img {最大宽度：100%;}

会成功的

Answer 2

要定位特定的屏幕尺寸，您应该使用@media 查询。Plusbackground-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;
    }
}