3

我的网站上有一个带有大图像（宽度为 1000 像素）的标题。此图像居中（水平）。如果用户使用宽度小于 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>
4

4 回答 4

7

为此，您将需要使用 CSS。

div {
    overflow-x: hidden;
}
于 2013-09-12T17:15:10.403 回答
1

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

于 2013-09-12T17:15:59.897 回答
1

试试position: fixed; 这个固定位置并且不允许任何滚动

于 2016-08-31T13:38:25.000 回答
0

你可以用 background-size: cover 做到这一点

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 注释：我正在使用自定义标签

<main-page>
  <banner-image></banner-image>
</main-page>
于 2017-08-24T12:56:32.167 回答