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

谢谢！参见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 here

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

1 个答案: