Html 禁用 div/img 上的垂直滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18770450/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
disable vertical scrolling on a div/img
提问by Nils Ziehn
I have a header on my website with a large image ( 1000px width ). This image is centered (horizontally). If a user comes to this website with a browser window which is slimmer than 1000px in width, he can scroll horizontally. This is what I would like to prevent, since the outer parts of the image are not important and the rest of the page is as wide as the users browser window.
我的网站上有一个带有大图像（宽度为 1000 像素）的标题。此图像居中（水平）。如果用户使用宽度小于 1000 像素的浏览器窗口访问此网站，则可以水平滚动。这是我想防止的，因为图像的外部部分并不重要，页面的其余部分与用户浏览器窗口一样宽。
For instance: A users browser window is 600px in width, what I would like to happen is:
例如：用户浏览器窗口的宽度为 600px，我希望发生的是：
The first 200px of the image are invisible, the next 600px are visible and the last 200px of the image are invisible again.
图像的前 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>
回答by user1
You will need to use CSS for that.
为此，您将需要使用 CSS。
div {
overflow-x: hidden;
}
回答by Darren Crabb
Should work by itself if you just set it as a background image, centered. You'll need to put it on a div that has 100% width applied to it, and a height specified in order to expand the div to see anything.
如果您只是将其设置为背景图像并居中，则应该可以自行工作。您需要将它放在一个 div 上，该 div 应用了 100% 的宽度，并指定了一个高度以展开 div 以查看任何内容。
回答by bourax webmaster
Try position: fixed;This fixes the position and doesn't allow any scrolling
试试position: fixed;这个固定位置，不允许任何滚动
回答by Brent Stees
You can do this with background-size: cover
您可以使用 background-size: cover
css
css
main-page { // making a container for demonstration purposes
display: block; // custom tags need a display, block forces 100% width
max-width: 1000px; // just matching your image width
margin: 0 auto; // centering if window is bigger than max-width
}
banner-image {
display: block; // custom tag needs a display
height: 80px; // set to the height of your image
background:
no-repeat
url('https://www.w3schools.com/cssref/mountain.jpg')
50% 50% / cover; // center then cover the element completely
}
HTML note: I'm using custom tags
HTML 注释：我正在使用自定义标签
<main-page>
<banner-image></banner-image>
</main-page>
