Question

我已经起草了一个简短的例子，说明了我到目前为止所做的事情，以及我想要实现的目标。

查看我的演示here

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

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

但这有点复杂，因为它适用于网站内的特定区域。

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

有什么想法吗？

Answer 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;
}

以下是我添加的CSS和一些可爱的placekittens的jsfiddle的更新版本： http://jsfiddle.net/kztGj/22/

这方面的缺点当然是它无法在Internet Explorer中使用＆lt; 9，Firefox 3.6或任何不支持CSS3的浏览器。但随后您要求提供响应式图像，因此您很难找到支持旧版浏览器的优雅解决方案。

有关background-size属性及其用途的更多信息，建议您查看this article，其内容非常丰富。

Answer 2

在您的图片中，添加 css ，就像这样

.custom-image {
    width:100%;
}

和 html

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

固定拉伸背景图像

2 个答案: