disable vertical scrolling on a div/img

问题

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.

For instance: A users browser window is 600px in width, what I would like to happen is:

The first 200px of the image are invisible, the next 600px are visible and the last 200px of the image are invisible again.

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

回答1:

You will need to use CSS for that.

div {
    overflow-x: hidden;
}

回答2:

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.

回答3:

Try position: fixed; This fixes the position and doesn't allow any scrolling

回答4:

You can do this with 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 note: I'm using custom tags

<main-page>
  <banner-image></banner-image>
</main-page>

来源：https://stackoverflow.com/questions/18770450/disable-vertical-scrolling-on-a-div-img

标签

css

html

browser

horizontal-scrolling