首页 文章

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

提问于
浏览 次
4

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

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

我试过这个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;
  }

虽然在肖像上工作得很好（我需要），但它没有't meet my needs on landscape: It keeps the image full screen width and crops it from the top and bottom (My requirement from the designers is keep full screen height and crop the sides). There are a lot of examples on the internet for keeping image'比率等（对于example），但我可以找到适合我情况的解决方案......

谢谢！的Yaniv

html css css3 mobile responsive-design

1 回答

  • 3

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

    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

    回复于

相关问题