1

我已经起草了一个简短的例子来说明我到目前为止所拥有的，以及我正在努力实现的目标。

在这里查看我的演示

在我的 jsfiddle 中，您将看到一个名为“content-wrap”的包装 div。在这个 div 中，我想要一个可以拉伸到窗口大小和内容的图像。

我之前做过背景图像拉伸：请参见此处的示例

但这有点复杂，因为它是针对站点内的特定区域的。

到目前为止，我已经尝试使用上面链接中的现有代码进行游戏，我认为我可能需要采取不同的方法。当您向下滚动时，图像不会保持在原位，它会随着滚动条移动（应该如此）。

有任何想法吗？

4

2 回答 2

1

如果您不介意使用 CSS3 的background-size属性，那么在您的#content-wrap {CSS 语句中添加以下内容将实现响应式背景图像，该图像将扩展以适应容器的大小。

#content-wrap {
    height: 1000px;
    background: #ccc;
    color: #fff;

    /* Added CSS */

    display: block;
    max-width: 100%;
    clear: both;
    background: transparent url("http://placekitten.com/900/900") top right no-repeat;
    background-size: cover;
}

这是您的 jsfiddle 的更新版本，其中包含我添加的 CSS 和一些可爱的 placekittens：http: //jsfiddle.net/kztGj/22/

这样做的缺点当然是它不能在 Internet Explorer < 9、Firefox 3.6 或任何不支持 CSS3 的浏览器中工作。但是随后您要求响应式图像，因此您将很难找到支持旧浏览器的优雅解决方案。

有关该background-size属性及其用途的更多信息，我建议您查看这篇文章，它的信息量很大。

于 2012-08-15T04:18:26.967 回答
0

在您的图像中，添加这样的CSS

.custom-image {
    width:100%;
}

和你的html 

<div>
    <img src="" class="custom-image" />
</div>
于 2012-08-31T09:55:59.467 回答