Question

在网站上放大网页时，我如何忽略调整图片大小：http://antares.pcadviser.ro/

我现在正在使用此功能，但在滚动时图像会调整大小：

#headerImage {
    height: 750px; 
    width: 100%;
    background: url(2.jpg) no-repeat;
    background-repeat: no-repeat;
    background-size: auto auto;
    margin-top: -50px;
}

如果有人能帮我解决这个问题，我真的很感激。

Answer 1

尝试

#headerImage {
background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

来自css tricks。 There's a demo too

Answer 2

好吧，我设法通过添加“background-size：cover;”来解决我的问题。这显然是用我的形象自动填充整个div。

以下是最终代码：

#headerImage {
    height: 750px; 
    width: 100%;
    background: url(2.jpg) no-repeat;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -50px;
}

如何在放大时忽略图像调整大小？

2 个答案: