使用Jquery的具有完整高度但响应宽度的背景图像

Question

我有一个高度1400和宽度1000的背景图片，如果我使用任何全屏幕背景jquery插件或代码从顶部或底部裁剪并使其适合整个屏幕但我想要的是一个插件或代码将确保背景图像基于浏览器的宽度响应，但滚动条应该可以看到背景图像的完整高度。目前它从顶部和底部庄稼高度。

如果不可能，至少作物应该只从底部保持纵横比。

Answer 1

.background{
  width: 100%;
  height: 100%;
  background-image:url(path/to/image.jpg);
  background-position: top center;
  background-size: cover;
}

这只会关闭底部，但请确保图像“覆盖”整个元素。

演示：http://jsfiddle.net/Rkf6Q/

要显示100％的高度，并将宽度裁剪，只需将background-size参数设置为auto 100%

演示：http://jsfiddle.net/Rkf6Q/1/