title: Images are not responsive to Max-Width property
body: <p>I'm attempting to get my 'Slider' images to be more responsive. I'm fairly certain my issue is an inheritance problem.</p>
  
  <p>If the 'slider' image is pulled out of the container div, they will resize based upon the window size.</p>
  
  <p>However, the images do not resize to fit the window when in the div.</p>
  
  <p>I have even tried inline css <strong><em>style="max-width:100%;"</em></strong> in the img tag, but it will not resize.</p>
  
  <p>I have tried multiple variations to get the image to be more fluid.</p>
  
  <p>Any help?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div id="slider"&gt;&lt;img src="img/img1.png" /&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body {
      background-color: #f2f2f2;
      height:100%;
  }
  
  
  #container {
      margin-right: auto;
      margin-left: auto;
      width: 960px;
      min-height:100%;
      position:relative;
  }
  
  #slider img {
      max-width: 100%;
      height: auto;
  }
  </code></pre>