背景尺寸：封面在 Android 平板电脑上无法纵向工作
Posted
技术标签:
【中文标题】背景尺寸：封面在 Android 平板电脑上无法纵向工作【英文标题】：background-size: cover not working in portrait on Android tablet 【发布时间】：2013-01-30 07:49:46 【问题描述】：我正在使用background-size 属性作为全宽和全高背景图像，但无法在 Nexus7 平板电脑的 Chrome 中以纵向视图完全覆盖它。它只覆盖宽度而不是高度，即它下面大约有200px 的空白区域。但是，当我在桌面 Chrome（或其他任何东西）和垂直显示器上查看该网站以模拟纵向尺寸时，它没有问题。
谁有解决办法？
CSS：
html
background: url(/images/post_bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/post_bg.jpg', sizingMethod='scale')";
纵向屏幕截图：
【问题讨论】：
【参考方案1】：我相信你可以通过在 CSS 中定义 html 和 body 标签的高度来修复它，如下所示：
html
height:100%;
min-height:100%;
body
min-height:100%;
希望对你有帮助
【讨论】：
请注意，在我的情况下，我只需要html 中的height 或min-height 而不需要其他任何东西。【参考方案2】：
我知道这个问题已经很久没有提出来了，但我只是找到了我认为的答案。 对我来说，如果你在后台 CSS 指令中省略了“fixed”，那么 background-size:cover 可以在 android 浏览器和 Android Chrome 中使用。 经过一些测试后，我可以将图像作为 DIV 的背景：
#yourDivSelectorHere
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 0;
background-image: url(/img/backgrounds/1.jpg) ;
background-repeat:no-repeat;
background-position: center center;
/* background-attachment: fixed; removed for Android */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
DIV 本身的位置是固定的（与背景图像相反），宽度和高度为 100%，并且放置在所有内容的后面。 与仅将背景图像添加到 HTML 或 BODY 相比，这需要付出一些额外的努力，但对我来说，它适用于我迄今为止测试过的所有浏览器（FF、Chrome、IE8、IE9、Safari）、iPad2 和 Android Chrome 以及安卓浏览器。
【讨论】：
好时机！这对我有用，应该是 IMO 接受的答案！ 问题是背景尺寸可以做的远不止封面，这就是它不起作用的地方。【参考方案3】：我会提供我找到的解决方案，以防将来有人遇到这种情况。我没有使用背景图片，而是使用了<img>：
HTML：
<img id="full_bg" src="/images/post_bg.jpg" >
CSS：
#full_bg
height: auto;
left: 0;
min-height: 100%;
min-width: 1024px;
position: fixed;
top: 0;
width: 100%;
@media screen and (max-width: 1024px)
#full_bg
left: 50%;
margin-left: -512px;
这适用于跨浏览器和移动设备。我找到了解决方案here。
【讨论】：
【参考方案4】：好吧，我可以想出另一个解决方案： 我将它添加到正文中，您需要注意的是 background-attachment:fixed 是最后一条规则：
作品：
body
height:100%;
width:100%;
background-size:cover;
background-repeat:no-repeat;
background-position: center center;
background-attachment:fixed;
无效：
body
height:100%;
width:100%;
background-size:cover;
background-attachment:fixed;
background-repeat:no-repeat;
background-position: center center;
真的很遗憾，电话浏览器一般来说都有点错误......
【讨论】：
该死！！我一直在寻找这个。你知道为什么需要固定吗？我一直检查这个。 不，我不知道这是为什么。我认为这只是一个错误，因为它也只有在它是最后一条规则时才有效，这在技术上对我来说毫无意义......【参考方案5】：使用 HTML 背景代替正文并给出 'height:100%'
html
height:100%;
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
【讨论】：
【参考方案6】：我发现了另一种使用 jquery 东西的解决方案。该修复基于我们使用横向尺寸/比例的图像作为背景的假设。
step1：比较“窗口高度”和“页面内容高度”
step2：如果“窗口高度”小于“页面内容高度”
第三步：将这个应用到body标签
HTML
<body style="background-size: auto 'page content height'; background-attachment: scroll;">
脚本
var wHeight = $(window).height();
var bodyHeight = $('page-content-element').height();
if(wHeight < bodyHeight)
$('body').attr('style', 'background-size: auto '+ (bodyHeight*1.1) +'px;background-attachment: scroll;');
else
$('body').removeAttr('style');
在页面加载和窗口调整大小时调用它
【讨论】：
你能解释一下什么是页面内容元素和页面内容高度吗？ IE。你能举一个更完整的例子吗？以上是关于背景尺寸：封面在 Android 平板电脑上无法纵向工作的主要内容，如果未能解决你的问题，请参考以下文章
是否有相当于背景大小的img（javascript）：封面？
在 Android 上针对不同的屏幕尺寸和密度重用可绘制图像