html - 保持背景图像全高，同时仅裁剪侧面以保持比例

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;
  }

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

谢谢！亚尼夫

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在这里