title: Using CSS to cut off left and right side of an image while scaling a window
body: <p>I currently have the following list of images:</p>
  
  <pre><code>&lt;div id='images'&gt;
          &lt;img src="images/placeholders/ph.jpeg" alt="Content missing"/&gt;
          &lt;img src="images/placeholders/ph1.jpg" alt="Content missing"/&gt;
          &lt;img src="images/placeholders/ph2.jpg" alt="Content missing"/&gt;
          &lt;img src="images/placeholders/ph3.jpg" alt="Content missing"/&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>These images cycle and are placed ontop of eachother, fading in and out. The images have a fixed height, but a variable width. This width is variable on the left and righthand side.</p>
  
  <p>Example bannerimage: 
  <a href="http://i.imgur.com/6zrWBD9.jpg" rel="nofollow">http://i.imgur.com/6zrWBD9.jpg</a></p>
  
  <p>What I'd like to have after scaling the browser window:
  <a href="http://i.imgur.com/figgCuJ.jpg" rel="nofollow">http://i.imgur.com/figgCuJ.jpg</a></p>
  
  <p>The height is fixed, both sides have been cut off by an equal amount during the browser window scaling. I hope someone could help me tackle this problem. I don't know what code to use to resize this the way I want it to.</p>
  
  <p>Thanks in advance!</p>