Css 禁用div/img上的垂直滚动_Css_Html_Browser_Horizontal Scrolling

Css 禁用div/img上的垂直滚动

css html browser

Css 禁用div/img上的垂直滚动,css,html,browser,horizontal-scrolling,Css,Html,Browser,Horizontal Scrolling,我在我的网站上有一个带有大图像（1000px宽）的标题。此图像居中（水平）。如果用户访问此网站时使用的浏览器窗口宽度小于1000px，则可以水平滚动。这是我想要阻止的，因为图像的外部部分并不重要，页面的其余部分与用户的浏览器窗口一样宽例如：用户浏览器窗口的宽度为600px，我希望：图像的第一个200px不可见，下一个600px可见，最后一个200px再次不可见 <html> <body> <div id="outer" style="width:10

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

例如：用户浏览器窗口的宽度为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>

您需要使用CSS来实现这一点

div {
    overflow-x: hidden;
}

如果您只是将其设置为背景图像，居中，则其本身应该可以工作。您需要将其放置在一个应用了100%宽度和指定高度的div上，以便展开div以查看任何内容。

尝试

位置：固定
这将固定位置，不允许任何滚动
您可以使用背景大小：封面来完成此操作
css
HTML注释：我正在使用自定义标记
<main-page>
  <banner-image></banner-image>
</main-page>


是的，显示它有一个背景图像。虽然这对图像有效，但我更喜欢user1的答案，它对任何div都有效。但是您的答案是thx！您还可以建议我如何将浏览器宽度变小时左侧消失的图像居中吗？右侧现在可以正常工作了！我来找“禁用垂直滚动”，你说“如果一个用户来到这个网站的浏览器窗口宽度小于1000px，他可以水平滚动。这是我想要阻止的”。因此，我将标题编辑为“禁用水平”，而不是“禁用垂直”。但后来我在我使用的一个div上尝试了overflow-y和overflow-x，得到了意想不到的结果，所以也许我遗漏了什么。。。？所以我把它改回来了。我应该知道不要试图干涉CSS问题。：-）这不是一个好的解决方案，如果位置固定，没有js，您将无法将div移出屏幕。
<main-page>
  <banner-image></banner-image>
</main-page>