Html CSS 背景图像在 iPad 和 iPhone 上错误地调整大小。
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/22141681/
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
CSS background images resizing incorrectly on iPad and iPhone.
提问by chap
My site's background image is resizing nicely in Chrome and Safari using background-size: cover, but when I go to test my website on an ipad or iphone, the CSS background image is really zoomed in and looks horrible. I've read lots of other questions on here relating to this and none have solved my problem.
我网站的背景图片在 Chrome 和 Safari 中使用 background-size:cover 很好地调整了大小,但是当我在 ipad 或 iphone 上测试我的网站时,CSS 背景图片真的被放大了,看起来很糟糕。我在这里阅读了很多与此相关的其他问题,但没有一个解决了我的问题。
HTML
HTML
<div class="background">
</div><!--background-->
.background has no container and is 100% width of the screen.
.background 没有容器,是屏幕的 100% 宽度。
CSS
CSS
.background {
height:600px;
width:100%;
position:relative;
background: url(css/img/strand.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
回答by Etienne Dupuis
I had the same issue, I used SCROLL instead of FIXED.
我有同样的问题,我使用 SCROLL 而不是 FIXED。
background-attachment:scroll;
回答by WoodrowShigeru
Apparently, the iPad's Safari is downsamplingimages above the 1024px threshold. I had tried using scroll
instead of fixed
but that wasn't successful. Other tricksdidn't work for me either.
显然,iPad 的 Safari 正在对超过 1024px 阈值的图像进行下采样。我曾尝试使用scroll
而不是,fixed
但没有成功。其他技巧对我也不起作用。
I solved thisby splitting my originally-too-large 1600×1600 image into twoimages. Because of that, I was able to use two 1024px sized images and achieved an even better readability than before.
我通过将我原来太大的 1600×1600 图像分成两个图像来解决这个问题。因此,我能够使用两个 1024 像素大小的图像,并获得了比以前更好的可读性。
Maybe a workaround like that would work for you, too.
也许这样的解决方法也适用于您。