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

Question

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

我有一张纵向图片和一张横向图片。我的任务是保持图像高度全屏，同时裁剪两侧以适合屏幕并保持纵横比。

我尝试了这个 css 技巧 post :

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

虽然在人像上表现出色(正如我所需要的)，但它不能满足我在风景上的需求: 它保持图像全屏宽度并从顶部和底部裁剪它(我对设计师的要求是保持全屏高度并裁剪两侧)。 互联网上有很多保持图像比例等的示例(对于 example )，但我可以找到适合我的情况的解决方案...

谢谢! 亚尼夫

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 here