Question

我的网站上有一个带有大图片（1000px宽度）的标题。此图像居中（水平）。如果用户使用宽度超过1000像素的浏览器窗口访问此网站，则可以水平滚动。这是我想要防止的，因为图像的外部部分并不重要，页面的其余部分与用户浏览器窗口一样宽。

例如：用户浏览器窗口宽度为600px，我希望发生的是：

图像的前200px是不可见的，接下来的600px是可见的，图像的最后200px再次不可见。

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

Answer 1

你需要使用CSS。

div {
    overflow-x: hidden;
}

Answer 2

如果您只是将其设置为背景图像，则应该单独工作。您需要将它放在应用了100％宽度的div上，并指定一个高度以扩展div以查看任何内容。

Answer 3

试试position: fixed; 这可以修复位置并且不允许任何滚动

Answer 4

您需要将图片作为包含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>

禁用div / img上的垂直滚动

4 个答案: