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

Question

老歌但好歌，我知道。这个问题被问了很多次，但我还没有一个明确的答案。可伸缩的背景图像，最好是 CSS，如果必须的话，愿意使用 jQuery 来支持。我经常遇到的一个问题(即使用 CSS3 背景图像)是当图像高度小于浏览器窗口高度时图像下方的空白区域。(例如:http://css-tricks.com/examples/ImageToBackgroundImage/)

这是我想要完成的:

• 保持纵横比
• 如果浏览器窗口小于图像大小，则剪切图像的高度和宽度
• 图像以页面为中心，因此剪裁不会影响页面的流动

以下是一些说明这些目标的示例(尽管我认为可以做得更好):

• http://www.thakoon.com/collections/thakoon-addition/pre-fall-2011
• http://whatstheweather.net/weather/submit

谢谢，谢谢，谢谢。

Answer 1

你可以使用类似的东西:

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

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

.
替代解决方案将迫使您使用 HTML。

例子:

• Stretch and scale a CSS image in the background - with CSS only
• http://webdesign.about.com/od/css3/f/blfaqbgsize.htm