Исходные изображения CSS неправильно изменяются на iPad и iPhone.

17

Фоновый образ моего сайта хорошо изменяется в Chrome и Safari, используя background-size: cover, но когда я иду тестировать свой сайт на ipad или iphone, фоновое изображение CSS действительно увеличивается и выглядит ужасно. Я прочитал много других вопросов, касающихся этого, и никто не решил мою проблему.

HTML

<div class="background"> 

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

.background не имеет контейнера и имеет 100% ширину экрана.

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;
}
    
задан chap 03.03.2014 в 08:13
источник

2 ответа

42

У меня была такая же проблема, я использовал SCROLL вместо FIXED.

background-attachment:scroll;
    
ответ дан Etienne Dupuis 04.04.2014 в 15:02
источник
0

По-видимому, Safari iPad - это понижающая дискретизация изображений выше 1024 пикселей порог. Я попытался использовать scroll вместо fixed , но это не удалось. Другие трюки тоже не работали для меня.

I решил это , разделив мои изначально слишком большие 1600 × 1600 изображение в два изображения. Из-за этого я смог использовать два изображения размером 1024 пикселя и добился еще большей читаемости, чем раньше.

Возможно, обходной путь может работать и для вас.

    
ответ дан WoodrowShigeru 15.10.2014 в 13:12
источник

Ознакомьтесь с другими вопросами по меткам