Как удалить горизонтальную полосу прокрутки?

Когда ширина устройства пользователя больше 480 пикселей, я покажу ему оригинальный GIF в качестве фона моего сайта.Как удалить горизонтальную полосу прокрутки?

Мой HTML:

<img class="background" src="assets/img/960XAUTO.gif" alt="Pink Smoke Background">

Мой CSS:

.background { 
    display: block; 

    height: 100%; 
    margin: 0 auto; 
}

Когда ширина устройства пользователя меньше, чем 480px я увеличил ширину моего GIF на 200%, потому что без увеличения дыма выглядит очень commpessed и тощий:

Итак, я это в моих CSS:

@media screen and (max-width: $breakpoint) { 
    .background { 
     position: absolute; 
     left: -50%; 

     max-width: 200%; 
    } 
}

И вот проблема. Поскольку мой GIF увеличивается в 2 раза, я получаю горизонтальную полосу прокрутки. Только посмотрите:

мне действительно нужно увеличить GIF, так что дым выглядит более широко. Как удалить пустое место с правой стороны, которое было создано GIF? Или, может быть, есть еще один способ увеличить ширину GIF? Я пытался использовать overflow по-разному. Также я попытался установить body ширину экрана экрана 100%.

источник

2016-03-07 Turak Vladyslav

Почему бы просто не использовать 'background' свойство вместо фактического изображения? – Roope

Можете ли вы отправить URL-адрес изображения gif или, по крайней мере, фактические размеры gif – Ody

Можете ли вы сделать скрипку или что-то в этом роде? –

Добавьте это в CSS, обращаясь к элементу вам нужно (она должна быть вся html или body как в этом примере, если это весь ваш фон сайт, кстати):

html, body { 
    overflow-x: hidden; 
}

источник

2016-03-07 15:05:51 prtnkl

Добавить background-attachment:fixed; в вашем стиле

код точным:

.background { 
     display: block; 
     background-attachment:fixed; 
     height: 100%; 
     margin: 0 auto; 
}

источник

2016-03-07 15:09:14

Это мне не помогло. Но я изменил 'position: absolute' на' fixed' в моем медиа-правиле, и теперь он работает для меня! –

Вы должны попробовать использовать фоновый центр с возможностью масштабирования проценты. Полное редактирование здесь https://plnkr.co/edit/wZZqiC3awyEzHLPpxYBI

.bg{ 
    width: 100%; 
    height: 100%; 
    background: no-repeat center/80% url("http://m.gdz4you.com/sandra/assets/img/960XAUTO.gif"); 
    background-size: cover; 
}

и, конечно, просто опускаем ДИВ

<div class="bg"></div>

источник

2016-03-07 16:14:42 Ody

Как удалить горизонтальную полосу прокрутки?

ответ

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