0

出于某种原因，我无法让图像在浏览器中跨越 100% 的宽度。

你可以在这里找到我的网站。

我的 div 内容如下：

    <div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); 
background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; "> 
    </div>

任何帮助，将不胜感激。

4

5 回答 5

1

在您的网站中，您将 div 拉伸到整个页面宽度。但是除非您这样做，否则背景图像不会拉伸：

background-size: 100%;
于 2012-08-06T14:06:00.267 回答
0

使用这个 CSS 属性

background-size:100% 560px;

这表明您的背景图像的宽度应扩展为 100%，但高度应为 560 像素。

于 2012-08-06T14:08:26.767 回答
0

背景图像的大小不会随着包含它们的元素的大小而调整。为什么不使用

<img class="home" src="http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg" 
  style="background-attachment: fixed; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; "> 
</div>

并删除该属性

height: 560px;

?

于 2012-08-06T14:06:40.133 回答
0

添加background-size: 100% auto;

<div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); 
background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; background-size: 100% auto;"> 
    </div>
于 2012-08-06T14:07:37.703 回答
0

我不喜欢拉伸图像以适应浏览器窗口的想法。因为这取决于客户端的机器上站点的显示方式。

所以，我不建议寻找这样的解决方案。相当：

  • 使用重复图像作为背景
  • 修复图像容器的尺寸。您尝试创建的效果看起来仍然很酷
  • 检测屏幕尺寸并根据分辨率更改背景。
于 2012-08-06T14:25:03.157 回答