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

Question

我知道Oldie但是好东西.这个问题被问了很多次,但我没有得到明确的答案.可伸缩的背景图像,最好只有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。

例子：

• 在后台拉伸和缩放 CSS 图像 - 仅使用 CSS
• http://webdesign.about.com/od/css3/f/blfaqbgsize.htm