Отключить вертикальную прокрутку на div/img

У меня есть заголовок на моем сайте с большим изображением (ширина 1000 пикселей). Это изображение по центру (по горизонтали). Если пользователь заходит на этот сайт с окном браузера шириной менее 1000 пикселей, он может прокручивать его по горизонтали. Это то, что я хотел бы предотвратить, поскольку внешние части изображения не важны, а остальная часть страницы такая же широкая, как окно браузера пользователя.

Например: окно браузера пользователя имеет ширину 600 пикселей, что я хотел бы получить:

Первые 200 пикселей изображения невидимы, следующие 600 пикселей видимы, а последние 200 пикселей изображения снова невидимы.

<html>
<body>
    <div id="outer" style="width:100%;overflow-x:hidden;">  
        <div id="inner" style="display: table;margin: 0 auto;width:1300px">
            <img src="image.jpg" alt="image" width="1300px">
        </div>
    </div>
</body>
</html>
Источник

4 ответа

Решение

Вам нужно будет использовать CSS для этого.

div {
    overflow-x: hidden;
}
Источник

Пытаться position: fixed;Это фиксирует положение и не позволяет прокрутку

Источник

Должно работать само по себе, если вы просто установите его в качестве фонового изображения, по центру. Вам нужно будет поместить его в div, к которому применена ширина 100%, а высота указана для того, чтобы расширить div, чтобы увидеть что-нибудь.

Источник

Вы должны сделать изображение фоном, содержащим div.

<html>
<body>
    <div id="outer"
         style="width:100%; overflow-x:hidden;">  
        <div id="inner"
             style="margin: 0 auto;
                    width:100%, 
                    background: url('image.jpg') 50% 0; 
                    max-width: 1300px;">
        </div>
    </div>
</body>
</html>
Источник
Другие вопросы по тегам