当img高度小于窗口高度时，CSS或jQuery可缩放背景图像下方无空白

老掉牙但很好，我知道。这个问题被问了很多次，但我还没有一个明确的答案。可伸缩的背景图像，最好是CSS，如果必须的话，愿意使用jQuery支持。我经常遇到的一个问题（例如，使用CSS3背景图像）是，当图像高度小于浏览器窗口高度时，图像下方的空白区域。 （例如：）

以下是我想要实现的目标：

• 保持纵横比
• 如果浏览器窗口小于图像大小，则剪裁图像高度和宽度
• 图像居中于页面上，因此剪辑不会偏移页面的流动

下面是一些例子来说明这些目标（尽管我认为可以做得更好）：

谢谢,， 非常感谢。

---

谢谢。

您可以使用以下内容：

selector {
  background: url(bgimage.jpg) no-repeat;
  background-size: 100%;
}

但它存在浏览器不兼容的问题

.
其他解决方案将迫使您使用HTML

示例：

---

给你。使用jQuery。使用

position:absolute将IMG标签设置为背景图像；z-indez:0调整窗口大小时，图像将相应调整大小。跨浏览器兼容

$(window).resize(function(){
    var bgwidth = $(window).width(),
    bgheight= $(window).height();
    $('img').attr({width:bgwidth, height:bgheight});
})

检查css中的工作示例：

html:


你看到了吗

它使用的jQuery插件做得很好。
是一位朋友推荐的超大插件，这正是我想要的！使用了核心功能，而不是幻灯片版本。
听起来这必须通过javascript/jQuery完成。不维护方面ratio@daniel图像外观取决于调整窗口大小的方式。图像不能有100%的宽度和高度，并且仍然保持纵横比。如果将窗口的宽度调整为100px，高度调整为600px，会发生什么情况。宽度如何可以是100像素，高度如何可以是100%并且仍然保持外观。我们正在根据您的要求扩展img以适应100%的窗口宽度和高度，没有任何空间。我希望图像保留其原始纵横比，并在最小尺寸后，开始剪切图像。这里有一个例子，但是向左上角剪辑：我想让它向图像的中心剪辑。可能吗？@Daneil，为了让它保持你的thakoon链接中的纵横比，我们可以将高度设置为100%。宽度会有所不同。在这种情况下不需要javascript。。检查。这将使图像随着窗口高度的变化而缩放，并保持纵横比。不过要小心。
background size
属性仅适用于Safari/Chrome和Opera。对于FF，您需要
-moz背景大小
。这是我提到的浏览器不兼容问题之一。
#wallpaper {position:absolute; width:100%; height:100%; top:0; left:0; z-index:0}
#wallpaper img {height:100%; width:100%; margin:0 auto;}

<div id="wallpaper"><img src="bg.jpg"></div>