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

【问题标题】：Keep background image full height while cropping only sides to keep ratio保持背景图像全高，同时仅裁剪侧面以保持比例
【发布时间】：2013-11-17 20:36:11
【问题描述】：

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

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

我试过这个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），但我可以找到适合我情况的解决方案......

谢谢！亚尼夫

【问题讨论】：

标签： html css mobile responsive-design

【解决方案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

【讨论】：

它有效，tnx！唯一缺少的是：背景尺寸：封面；为了让它发挥作用。