CSS 背景大小：封面不适用于 iOS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24154666/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
background-size: cover not working on iOS
提问by Hoàn Nguy?n
This is my code:
这是我的代码：
background-color:#fff;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center center;
It's working on desktop, iPad and Android mobile:
它适用于台式机、iPad 和 Android 移动设备：
On Chrome and Safari on iPhone, the background is too big:
在 iPhone 上的 Chrome 和 Safari 上，背景太大：
回答by Matt Fiocca
This happens, particularly on iOS, when you have background-attachment:fixed. On mobile, I usually put background-attachment:scrollinside of a @mediaquery.
这种情况会发生，尤其是在 iOS 上，当您有background-attachment:fixed. 在移动设备上，我通常会放入background-attachment:scroll一个@media查询中。
As @RyanKimber pointed out, fixed attached images use the whole <body>size. On mobile this can get really tall which blows your image out. Setting the attachment back to scrollallows your cover image to stretch within its own container.
正如@RyanKimber 指出的那样，固定的附加图像使用整个<body>尺寸。在移动设备上，这会变得非常高，这会使您的形象大打折扣。将附件设置回scroll允许您的封面图像在其自己的容器内拉伸。
回答by Viktor Tabori
Elaborating on Ryan's answer, without adding any new htmlnode or using @mediaqueries, using only one css.
详细阐述 Ryan 的答案，不添加任何新html节点或使用@media查询，仅使用一个 css。
If you want to keep a
coversizedfixedbackground on all the devices including iOS, without adding a new node, then the trick is to do the fixed positioning on the element (body)itself and not the background, since a fixed background and cover sizing messes up iOS.
如果你想在包括 iOS 在内的所有设备上保持一个
cover大小的fixed背景，而不添加一个新节点，那么诀窍是在元素（主体）本身而不是背景上进行固定定位，因为固定的背景和封面大小混乱上 iOS。
It works in production like a charm on iOS as well: https://www.doklist.com/
它在生产中也像 iOS 上的魅力一样工作：https: //www.doklist.com/
This code won't work, since iOS uses the hight of the documentand not the viewport:
此代码将不起作用，因为 iOS 使用的高度document而不是viewport：
body {
background: url(https://www.w3schools.com/css/trolltunga.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Now this is the magic, the body:afteris fixed, and not the background:
现在这是魔法，body:after是固定的，而不是背景：
body:after{
content:"";
position:fixed; /* stretch a fixed position to the whole screen */
top:0;
height:100vh; /* fix for mobile browser address bar appearing disappearing */
left:0;
right:0;
z-index:-1; /* needed to keep in the background */
background: url(https://www.w3schools.com/css/trolltunga.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}I could have used the bodyitself, with "position:fixed;overflow-y:scroll", but I didn't want to mess with the positioning of the body and my overall layout.
我可以使用身体本身，“位置：固定；溢出-y：滚动”，但我不想弄乱身体的定位和我的整体布局。
So doing this on the body:afteris a very easy fix. I have tested the solution on Mac, and iOS with firefox, safari, chrome.
所以在body:after上这样做是一个非常简单的修复。我已经在 Mac 和 iOS 上使用 firefox、safari、chrome 测试了该解决方案。
I also created a github repo with 2 examples for this: https://github.com/thesved/fixed-cover-background
我还为此创建了一个包含 2 个示例的 github 存储库：https: //github.com/thesved/fixed-cover-background
回答by Ryan Kimber
This caused me a number of problems as well. The problem is that iOS is using the full height & width of the body instead of the viewport to decide the size.
这也给我带来了许多问题。问题是 iOS 使用主体的全高和全宽而不是视口来决定大小。
Our solution was to create a new <div class="backdrop"></div>.
我们的解决方案是创建一个新的<div class="backdrop"></div>.
We apply the background to this div and give it position: absolute; top: 0; bottom: 0; left: 0; right: 0.
我们将背景应用到这个 div 并赋予它 position: absolute; 顶部：0；底部：0；左：0；正确：0。
Since this div is now the size of the viewport, background-size: coverworks just fine.
由于这个 div 现在是视口的大小，所以background-size: cover工作得很好。
回答by myworldbox
Simple answer:
简单回答：
Change background-attectmentfrom fixedto scroll.
将background-attectment从fixed更改为scroll。
.yourClass {
background-attectment: scroll;
}
回答by FranCarstens
This post answers your questions: why does CSS background-size: cover not work in portrait mode on iOS?
这篇文章回答了您的问题：为什么 CSS background-size:cover 在 iOS 上的纵向模式下不起作用？
Not all browsers recognize the cover keyword for background-size, and as a result, simply ignore it.
并非所有浏览器都能识别 background-size 的 cover 关键字，因此，只需忽略它。
So we can overcome that limitation by setting the background-size to 100% width or height, depending on the orientation. We can target the current orientation (as well as the iOS device, using device-width). With these two points I think you can use CSS background-size:cover on iOS in portrait-mode
因此，我们可以通过将背景大小设置为 100% 宽度或高度来克服该限制，具体取决于方向。我们可以定位当前方向（以及 iOS 设备，使用 device-width）。有了这两点，我认为您可以在 iOS 上以纵向模式使用 CSS background-size:cover
See that post for more resources.
有关更多资源，请参阅该帖子。
回答by Lind el Loren
Try this:
尝试这个：
background: url( /gfx/background.jpg ) no-repeat top center fixed;
background-size: 100vmax 100vmax;
As mentioned before, "cover" will cover document height, not view height. Most of the units will not work as expected hence vmax.
如前所述，“cover”将覆盖文档高度，而不是视图高度。大多数单元将无法按预期工作，因此 vmax。
Not really cover, does the job with squared images :)
不是真的覆盖，用平方图像做这项工作:)
