Javascript 垂直拉伸背景图像而不是按比例拉伸，而不仅仅是覆盖-这可以实现吗？_Javascript_Jquery_Css

Javascript 垂直拉伸背景图像而不是按比例拉伸，而不仅仅是覆盖-这可以实现吗？

javascript jquery css

Javascript 垂直拉伸背景图像而不是按比例拉伸，而不仅仅是覆盖-这可以实现吗？,javascript,jquery,css,Javascript,Jquery,Css,编辑：答案将允许背景图像根据身体大小改变其高度。如果主体高度为500px，则应为100%宽度，500px高度。或100%宽度2500px高度也许我错过了这条船，但我正试图找出如何让我的背景图像与页面缩放。最终用户不希望背景图像是静态的（封面），但是图像应该随着其内容在其站点上的大小而缩放我猜这不能用CSS单独完成。当我说我想我已经经历了一大堆不同的方法来做这件事这只是一个简单的javascript/jquery，在这里我得到body标记的高度，然后将其应用到背景图像高度如果您需要一个示例

编辑：答案将允许背景图像根据身体大小改变其高度。如果主体高度为500px，则应为100%宽度，500px高度。或100%宽度2500px高度

也许我错过了这条船，但我正试图找出如何让我的背景图像与页面缩放。最终用户不希望背景图像是静态的（封面），但是图像应该随着其内容在其站点上的大小而缩放

我猜这不能用CSS单独完成。当我说我想我已经经历了一大堆不同的方法来做这件事

这只是一个简单的javascript/jquery，在这里我得到body标记的高度，然后将其应用到背景图像高度

如果您需要一个示例：

<body>
<div class="first"><!--TEXT--></div>
<div class="second"><!--TEXT--></div>
</body>

这需要在多个具有不同身体高度的页面上工作

编辑： DIV上的固定宽度用于说明该概念。我道歉

body {
    background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat; 
    background-size:100% 100%;
}

以下CSS应修复背景图像，并使其覆盖整个身体，无论其宽度或高度大小-请参见

但是，请注意IE8

背景尺寸

编辑：使用以下CSS

body {
    background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center;
    background-size:100% 100%;
}

下面的CSS应该修复背景图像，并使其覆盖整个身体，无论其大小、宽度或高度-请参见

但是，请注意IE8

背景尺寸

编辑：使用以下CSS

body {
    background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center;
    background-size:100% 100%;
}

添加到您的身体css：

background-size:100% 100%;

添加到您的身体css：

background-size:100% 100%;

看来我们需要一个完整的答案

上面建议

背景大小：100%100%将背景图像拉伸到全宽和全高。确实如此
假设您的内容很小（400px）-背景图像仅覆盖400-
假设你的内容非常大（2500px）-背景图像仍然覆盖整个高度-
似乎我们需要一个完整的答案）
上面建议背景大小：100%100%将背景图像拉伸到全宽和全高。确实如此
假设您的内容很小（400px）-背景图像仅覆盖400-
假设你的内容真的很大（2500px）-背景图像仍然会覆盖整个高度-
因为你可以看到，在最后一个div中，背景图像没有延伸到文本的底部。我在div中添加了一个固定的宽度以供说明：@NicholasDecker，确实如此：）在你的小提琴中，内容比你提供的值要大，所以它似乎不会拉伸。事实上，如果你剪掉溢出的内容或去掉固定的高度，不管发生什么，背景都会拉伸。看这里（删掉内容）-？或者在这里-（删除高度）-需要显示内容。。。我不能切断它，因为重点是你不应该在内容div上设置高度。如果你希望背景图像始终具有最小高度以保持清晰，可以设置最小高度？正如你所看到的，在最后一个div中，背景图像不会延伸到文本的底部，我为div添加了一个固定的宽度以供说明：@NicholasDecker，确实如此：）在你的小提琴中，内容比你提供的价值更大，所以它似乎没有延伸。事实上，如果你剪掉溢出的内容或去掉固定的高度，不管发生什么，背景都会拉伸。看这里（删掉内容）-？或者在这里-（删除高度）-需要显示内容。。。我不能切断它，因为重点是你不应该在你的内容分区上设置高度。如果你希望背景图像总是有一个最小高度以保持清晰，可以设置最小高度？在我的示例中，最终用户不希望背景图像是静态的（封面）。当窗口大于图像时，图像将放大。当窗口小于图像时，是否也希望它缩小？…它也会这样做@Nicholas Decker静态位置没有说明背景的位置。请更清楚地描述您的要求。图像将放大。我要找的是：垂直拉伸背景图像，而不是按比例拉伸，而不仅仅是覆盖。无论宽度如何，我都希望垂直拉伸背景图像，使其能够填充背景，而不管站点上有什么类型的内容。这意味着，如果内容比背景图像高，那么无论发生什么情况，背景图像都是全高的。滚动内容，而不是静止图像。很抱歉，我以为我的标题说得很清楚。请原谅。在我的示例中，最终用户不希望背景图像是静态的（封面）。当窗口大于图像时，图像将放大。当窗口小于图像时，是否也希望它缩小？…它也会这样做@Nicholas Decker静态位置没有说明背景的位置。请更清楚地描述您的要求。图像将放大。我要找的是：垂直拉伸背景图像，而不是按比例拉伸，而不仅仅是覆盖。无论宽度如何，我都希望垂直拉伸背景图像，使其能够填充背景，而不管站点上有什么类型的内容。这意味着，如果内容比背景图像高，那么无论发生什么情况，背景图像都是全高的。滚动内容，而不是静止图像。很抱歉，我以为我的标题说得很清楚。请原谅我，他不做这项工作。背景图像没有垂直填充。背景大小：150%150%；我想是的。如果我们使用“背景附件：固定；”它可能看起来像一个静态的，这就是我想要做的。。但是客户端希望图像滚动。。。。因此，当页面变为ta时，图像会变得更高