[英]Keep background image full height while cropping only sides to keep ratio
I have a mobile page with full screen background image. 我有一个带全屏背景图片的移动页面。
I have one image for portrait and one for landscape. 我有一个肖像图像和一个景观图像。 My mission is to keep image height full screen while cropping the sides to fit screen and keep aspect ratio. 我的任务是保持图像高度全屏,同时裁剪侧面以适应屏幕并保持纵横比。
I tried this css tricks post : 我试过这个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;
}
While working great (as I needed) on portrait, it doesn'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's ratio etc. (for example ), but I could find a solution for my situation... 互联网上有很多例子用于保持图像的比例等( 例如 ),但我可以找到适合我情况的解决方案......
Thanks! 谢谢! Yaniv 的Yaniv
This managed to work for me, this is based on the image being a large enough size to cover large screen sizes... 这设法适合我,这是基于图像足够大,以涵盖大屏幕尺寸......
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%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.