固定拉伸背景图片

我已经草拟了一个我到目前为止所做的简单示例，以及我正在努力实现的目标。固定拉伸背景图片

见我的演示here

在我的jsfiddle你会看到一个名为“内容包”的包装股利。在这个div内，我想要一个可以扩展到窗口大小和内容的图像。

我已经做了背景图片拉伸前：见例如here

但是，这是一个比较复杂一点，因为它是网站内的特定区域。

我已经尝试过使用上述链接中的现有代码进行游戏，我想我可能需要采取不同的方法。当您向下滚动时，图像不能保持在原位，它会随滚动条一起移动（因为它应该）。

任何想法？

来源

2012-08-15 Filth

你的意思是，作为背景图像。有这个http://jsfiddle.net/kztGj/22/？ – Jeemusu 2012-08-15 04:06:58

@Jeemusu是作为背景图片 - 您的示例非常接近，因为图片无法具有固定高度，因为内容会填充页面，因此会增加页面高度。 – Filth 2012-08-15 04:09:22

如果删除高度，如第22次迭代jsfiddle.net/kztGj/22？等等，你是指固定高度？容器上的固定高度为300px？ – Jeemusu 2012-08-15 04:09:56

如果您不介意使用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财产及其用途的更多信息，我建议您查看this article，其相当丰富。

来源

2012-08-15 04:18:26 Jeemusu

这是一个很棒的JS，它可以为你带来这个IE - https://github.com/louisremi/jquery.backgroundSize.js – Brian 2012-09-05 01:30:38

在你的图像，添加CSS这样

.custom-image { 
    width:100%; 
}

和你HTML

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

来源

2012-08-31 09:55:59

固定拉伸背景图片

回答

相关问题