title: Keep an Image Always Centered Regardless of Browser Size
body: <p>I am wondering if it is possible to keep an <code>img</code> inside a <code>div</code> always centered regardless of the browser size? By being centered I mean that the left/right sides of the image gets cropped to ensure the image stays centered without modifying the height. Also, is it possible to prevent the horizontal scroll bar from appearing when the browser width is less then the image width? </p>
  
  <p>I'm sure this is really easy to do if my image is located in a <code>background-url</code> tag in CSS, but because this image is being housed inside the SlidesJS carousel the image has to be from an <code>img</code> tag. </p>
  
  <p>At the moment, I have used <code>margin:0 auto;</code> to keep the image centered as long as the browser width is larger then the image. Once the browser width shrinks, the image does not resize with the shrinking browser size. I also have yet to figure out how to remove the horizontal scroll bar when the browser width is too small.</p>
  
  <p>This is what I'm trying to achieve: <a href="https://imgur.com/Nxh5n" rel="noreferrer">http://imgur.com/Nxh5n</a></p>
  
  <p>This is an example of what the page layout is suppose to look like: <a href="https://imgur.com/r9tYx" rel="noreferrer">http://imgur.com/r9tYx</a></p>
  
  <p>Example of my code: <a href="http://jsfiddle.net/9tRZG/" rel="noreferrer">http://jsfiddle.net/9tRZG/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="slides"&gt;
          &lt;div class="slides_container"&gt;
              &lt;div class="slide"&gt; &lt;!-- Carousel slide #1 --&gt;
                  &lt;img src="http://www.placehold.it/200x50/"&gt;
              &lt;/div&gt;
              &lt;div class="slide"&gt; &lt;!-- Carousel slide #1 --&gt;
                  &lt;img src="http://www.placehold.it/200x50/"&gt;
              &lt;/div&gt;
              &lt;div class="slide"&gt; &lt;!-- Carousel slide #1 --&gt;
                  &lt;img src="http://www.placehold.it/200x50/"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#wrapper {
      width: 200px;
      margin: 0 auto;
  }​
  </code></pre>