文章/答案/技术大牛

发布

社区首页 >问答首页 >网页设计中的泛化形象

问网页设计中的泛化形象
EN

Stack Overflow用户

提问于 2012-08-23 17:02:29

回答 2查看 92关注 0票数 1

我正在编写一个网站，并尝试有类似www.airbnb.com的东西:我的意思是在顶部有一个静态栏(这部分是可以的)，下面有一个大的图像和一个大的居中按钮。

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

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

非常感谢！

css

web

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-08-23 17:28:29

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

}

您选择的解决方案显然是由您自己决定的，以上内容仅作为示例。

票数 1

Stack Overflow用户

发布于 2012-08-23 17:06:52

如果您使用的是<img>，则将width和height属性设置为它。

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12088225

复制

相似问题

问网页设计中的泛化形象
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问网页设计中的泛化形象EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问网页设计中的泛化形象
EN