保持背景图像全高，同时仅裁剪边以保持比例

Question

我有一个带全屏背景图片的移动页面。

我有一个肖像图像和一个景观图像。 我的任务是保持图像高度全屏，同时裁剪侧面以适应屏幕并保持纵横比。

我试过这个css技巧帖子 ：

  html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }

虽然在肖像上工作得很好（我需要）但它不能满足我对风景的需求：它保持图像全屏宽度并从顶部和底部裁剪（我的要求来自设计师保持全屏高度并裁剪侧）。 互联网上有很多例子用于保持图像的比例等（ 例如 ），但我可以找到适合我情况的解决方案......

谢谢！ 的Yaniv

Answer 1

这设法适合我，这是基于图像足够大，以涵盖大屏幕尺寸......

 html { 
  background: url(http://lolcat.com/images/lolcats/1338.jpg) no-repeat center center fixed; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
  }

Jsfiddle在这里