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