CSS背景图片在iPad和iPhone上调整不正确。 [英] CSS background images resizing incorrectly on iPad and iPhone.

问题描述

我的网站的背景图片在Chrome和Safari中使用background-size：cover进行了很好的调整，但是当我在ipad或iphone上测试我的网站时，CSS背景图像真的放大了，看起来很可怕。我在这里读了很多关于这个问题的其他问题，但都没有解决我的问题。

HTML

 < div class =background> 
 
< / div><！ -  background  - > 
  

.background没有容器，屏幕宽度为100％。

CSS

  .background {
 height：600px; 
宽度：100％; 
职位：亲属; 
 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; 
} 
  

解决方案

我使用SCROLL而不是FIXED。

  background-attachment：scroll; 
  

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.

HTML

<div class="background"> 

</div><!--background-->

.background has no container and is 100% width of the screen.

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;
}

解决方案

I had the same issue, I used SCROLL instead of FIXED.

background-attachment:scroll;

这篇关于CSS背景图片在iPad和iPhone上调整不正确。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！