javascript - 网页设计中的广泛图像

Question

我正在编写一个网站并尝试拥有类似 www.airbnb.com 的内容:我的意思是顶部有一个静态栏(这部分没问题)，下面有一个大图像，中间有一个大按钮。

我怎样才能让这个大图像在每个屏幕分辨率上正常显示:目前，在 1920*1080 像素上，我的图像非常完美，大按钮居中。但是，如果我更改分辨率，图像将被裁剪或调整大小...

你知道我该怎么做吗(css 或 javascript)？

非常感谢!

Answer 1

您可以使用 CSS 媒体查询根据分辨率加载物理上不同大小的图像，例如

您的原始桌面背景:

body {
    background:url(images/bg1.jpg) no-repeat 0 0;
}

对于最大分辨率为 800 像素的屏幕:

@media (max-width: 800px) {

    body {
        background:url(images/bg2.jpg) no-repeat 0 0;
    }

}

对于最大分辨率为 480 像素的屏幕:

@media (max-width: 480px) {

    body {
        background:url(images/bg3.jpg) no-repeat 0 0;
    }

}

你选择的分辨率显然取决于你自己，以上仅作为示例。