title: disable vertical scrolling on a div/img
body: <p>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.</p>
  
  <p>For instance:
  A users browser window is 600px in width, what I would like to happen is:</p>
  
  <p>The first 200px of the image are invisible, the next 600px are visible and the last 200px of the image are invisible again.</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
      &lt;div id="outer" style="width:100%;overflow-x:hidden;"&gt;  
          &lt;div id="inner" style="display: table;margin: 0 auto;width:1300px"&gt;
              &lt;img src="image.jpg" alt="image" width="1300px"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>