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

Question

我正在编写一个网站并尝试使用类似 www.airbnb.com 的内容：我的意思是顶部有一个静态栏（这部分没问题），下面是一个带有大中心按钮的大图像。

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

你知道我该怎么做（css或javascript）吗？

太感谢了！

score 1 · Accepted Answer

您可以使用 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;
    }

}

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

score 0 · Accepted Answer

如果您正在使用<img>，则为其设置widthandheight属性。

如果您将图像用作现有元素的背景，请为背景设置正确的样式：

div{
  background:url(img_flwr.gif);
  background-size:80px 60px;
  background-repeat:no-repeat;
}

2 回答 2