title: Image with 100% width and a maximum and minimum height set without stretching img
body: <p>I can't figure out how to make the image not stretch but instead just cover the area. 
  I am trying to make a image slider with css with an image that has 100% witdh and min / max height. Here is my html:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="slider"&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;input type="radio" id="input1" class="input" checked/&gt;
                  &lt;label for="input1" id="label1" class="label"&gt;&lt;/label&gt;
                  &lt;img src="img/img-1.jpg" alt="img-1" id="img-1"/&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;input type="radio" id="input2" class="input"/&gt;
                  &lt;label for="input2" id="label2" class="label"&gt;&lt;/label&gt;
                  &lt;img src="img/img-2.jpg" alt="img-2" id="img-2"/&gt;
              &lt;/li&gt;
  
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried many things with css but this is the closest i got:</p>
  
  <pre><code>@import "reset.css";
  body {
  font-size: 100%;
  }
  #container {
  height: 100%;
  background: #cccccc;
  }
  .slider {
  max-height: 600px;
  min-width: 100%;
  background: red;
  }
  .slider img {
  width: 100%;
  min-height: 200px;
  max-height: 600px;
  }
  </code></pre>
  
  <p>I hope you can help me. Thanks in advance</p>