Фоновое изображение, выходящее за пределы содержимого на размер мобильного экрана

Я разработал веб-сайт, который является отзывчивым. Я использую фиксированное фоновое изображение на некоторых моих веб-страницах. Проблема заключается в том, что на мобильном экране изображение не реагирует, оно выходит за пределы (контент). .. У меня есть googled, чтобы узнать причину, но единственным способом, который я нашел, было преобразование изображения в формат wbmp.Фоновое изображение, выходящее за пределы содержимого на размер мобильного экрана

Когда я конвертирую изображение в wbmp, html вообще не принимал. .. Любая идея, позволяющая отображать изображение на небольших экранах в ответном режиме?
Или любой инструмент, который я должен использовать?

CSS

body{ 
    background:url(../images/gallery-1-big.jpg) center center fixed no-repeat; 
    background-size:cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    -webkit-backface-visibility: hidden; 
opacity: 0.8; 
}

Тот же кусок кода для мобильного экрана пусть изображение искажается, и когда я попытался ниже фрагмент кода, то шоу изображения, но только в верхней половине экрана

@media (max-width: 480px) { 
body 
{ 
    background:url(../images/gallery-1-big.jpg) fixed no-repeat; 
    background-size:100%; 

}

источник

2016-08-31 bc110402307 Syed Zeeshan Haide

Можем ли мы иметь образец вашего кода или скрипку, пожалуйста? – Buisson

Возможный дубликат [Рецидивные фоновые изображения css] (http://stackoverflow.com/questions/12609110/responsive-css-background-images) – Shiham

Если вы используете jQuery, рассмотрите возможность использования Vegas plug in https: //vegas.jaysalvat. com/ – SandroMarques

вам нужно дать ширина: 100% и рост: 100% к изображению в CSS ...

body 
 
{ 
 
    background: url(img_flwr.gif); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
    }

источник

2016-08-31 09:33:32

не поправляюсь в моем случае :( –

см. мой отредактированный вопрос –

Здесь вы можете увидеть совместимый image formats. Мне кажется, что для фонового изображения лучше использовать формат png.

Если у вас есть ваше изображение в качестве фона, вы должны установить backgroud-size в cover или 100%.

Вы можете проверить это website, что имеет очень хорошие примеры.

Редактировать

Окей, я сделал это fiddle, чтобы показать вам, что происходит. Когда вы используете изображения в качестве фона, они могут быть отзывчивыми, но если вам нужна идеальная подгонка, вам нужно, чтобы изображение имело то же соотношение, что и его контейнер, в вашем случае body. Если изображение имеет одинаковое соотношение сторон, все в порядке с background-size:100%.

Проблема возникает, когда они не совпадают. Если вы используете background-size:100%, изображение будет поместиться в одном измерении (ширина или высота), но не в том и другом, потому что это приведет к растяжению или расширению изображения, деформируя изображение. Чтобы решить эту проблему, вы можете использовать background-size:cover, и это сделает изображение заполнить все body, но, вероятно, некоторые части изображения будут скрыты, чтобы получить идеальную форму.

источник

2016-08-31 09:34:33

добавить 'background-size: 100%;' просто в следующей строке вашего фона : ... ' –

лучше для вас, чтобы изменить свой ответ и поставить свой код, по крайней мере соответствующую часть на ней лучше помощь может быть оказана –

@ bc110402307SyedZeeshanHaide Я обновил свой ответ тоже –

Это должно сделать трюк:

body { 
background: url(background-photo.jpg) center center cover no-repeat fixed;}

Важной частью является фон-размер: крышка; который сообщает браузеру о масштабировании пропорциональности изображения. Это зависит от того, какое изображение вы используете.

Если у вас есть изображение, которое шире, чем высокое, оно будет за пределами границ на смартфоне, который удерживается в портретном режиме .... И наоборот, если ваш образ выше, чем широкий , он отображается правильно в портретном режиме, но будет иметь проблемы в ландшафтном режиме ...

Если вы используете jpg или png, зависит от вас. Посмотрите, насколько велика картина, и выберите формат, который имеет меньший размер.

источник

2016-08-31 09:41:05 Buntstiftmuffin

У меня уже есть тот же кусок кода –

И он не работает так, как вы хотите? – Buntstiftmuffin

нет, поэтому сидение путать. Upto таблетка работает отлично, но на смартфонах я не знаю, что случилось с этим –

Я просто пропустил этот кусок кода. Я положил его на верхнюю часть моего css и удалил медиа-запросы, и моя проблема решена.

html, body { 
    height:100%; 
}

источник

2016-08-31 10:49:13

Фоновое изображение, выходящее за пределы содержимого на размер мобильного экрана

ответ

Смежные вопросы