网页设计中的广泛形象

Extensive Image in Web design

本文关键字：网页设计      更新时间：2023-09-26

我正在编写一个网站代码，并试图拥有类似www.airbnb.com的东西：我的意思是顶部有一个静态栏（这部分可以），下面有一个带大居中按钮的大图像。

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

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

非常感谢！

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

您的原始桌面背景：

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

对于最大分辨率为800px的屏幕：

@media (max-width: 800px) {
    body {
        background:url(images/bg2.jpg) no-repeat 0 0;
    }
}

对于最大分辨率为480px的屏幕：

@media (max-width: 480px) {
    body {
        background:url(images/bg3.jpg) no-repeat 0 0;
    }
}

你选择的解决方案显然取决于你自己，以上仅作为示例。

如果使用<img>，则将width和height属性设置为该属性。

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

div{
  background:url(img_flwr.gif);
  background-size:80px 60px;
  background-repeat:no-repeat;
}
相关文章：