固定拉伸背景图像答案

【问题标题】：Fixed stretching background image固定拉伸背景图像
【发布时间】：2012-08-15 04:03:23
【问题描述】：

我已经草拟了一个简短的示例，说明我目前所拥有的以及我正在努力实现的目标。

看我的演示here

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

我之前做过背景图片拉伸：见例子here

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

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

有什么想法吗？

【问题讨论】：

你的意思是，作为背景图片。这个jsfiddle.net/kztGj/22 怎么样？
@Jeemusu 是的，作为背景图片 - 您的示例非常接近，只是图片不能具有固定高度，因为内容会填满页面，因此会增加页面高度。
如果删除高度，如迭代 22 jsfiddle.net/kztGj/22 ？等等，固定高度是什么意思？您在容器上设置了 300px 的固定高度？
是的，只是为了显示背景颜色。在内容 div 上，我不会有固定的高度，因为内容将填充该 div。
添加了响应式设计标签，因为我认为这可能属于响应式设计领域。

标签： html css xhtml responsive-design

【解决方案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

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

【讨论】：

这里有一个很棒的 JS 可以为你带来这个到 IE -github.com/louisremi/jquery.backgroundSize.js

【解决方案2】：

在你的图片中，添加这样的css

.custom-image {
    width:100%;
}

和你的html

<div>
    <img src="" class="custom-image" />
</div>

【讨论】：