Image with 100% width and a maximum and minimum height set without stretching img

Question

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:

<div id="container">
    <div class="slider">
        <ul>
            <li>
                <input type="radio" id="input1" class="input" checked/>
                <label for="input1" id="label1" class="label"></label>
                <img src="img/img-1.jpg" alt="img-1" id="img-1"/>
            </li>
            <li>
                <input type="radio" id="input2" class="input"/>
                <label for="input2" id="label2" class="label"></label>
                <img src="img/img-2.jpg" alt="img-2" id="img-2"/>
            </li>

        </ul>
    </div>
</div>

I've tried many things with css but this is the closest i got:

@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;
}

I hope you can help me. Thanks in advance

Answer 1

Without distorting the image the only option is to scale and crop. This can be achieved by putting the image inside of a div and setting the height of the div to crop the image.

Like this:

div{
    width: 100%;
    height: 80%;
    min-height: 200px;
    max-height: 400px;
    overflow: hidden;
    text-align: center;
}
img{
    width: 100%;
}

http://jsfiddle.net/8szsq/1/

...Or you wanted the opposite (fixed width crop height)

div{
    width: 100%;
    height: 80%;
    min-height: 200px;
    max-height: 400px;
    overflow: hidden;
}

img{
    width: 600px;
}

http://jsfiddle.net/8szsq/2/

Answer 2

Did you just tried this?

.slider img {
  width: 100%;
  min-height: 200px;
  max-height: 600px;
  height: auto;
}

Answer 3

Taking into account the padding on the UL and the space that your other elements take up, your image is actually taking up the correct space.

Try adding this to your css

ul {padding:0;}
li {list-style-type: none;}

And remove the label and you'll see that your image size is correct.

Try positioning the other elements.