Изображение со 100% шириной и максимальной и минимальной высотой, установленной без растягивания img

Question

Я не могу понять, как сделать изображение не растянутым, а вместо этого просто накрыть область. Я пытаюсь сделать слайдер изображения с css с изображением, которое имеет 100% witdh и минимальную/максимальную высоту. Вот мой 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> 

Я пробовал много вещей, с помощью CSS, но это ближайший я получил:

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

Я надеюсь, что вы можете мне помочь. Заранее спасибо

Answer 1

Вы только что попробовали это?

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

Answer 2

Без искажения изображения единственным вариантом является масштабирование и обрезка. Это может быть достигнуто путем помещения изображения внутри div и установки высоты div для обрезки изображения.

Как это:

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

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

... Или вы хотите, противоположную (фиксированная ширина высота кадрирование)

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

img{ 
    width: 600px; 
} 

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

Answer 3

Принимая во внимание отступы на UL и пространстве, которое ваши другие элементы ta ke up, ваше изображение фактически занимает правильное пространство.

Попробуйте добавить это к вашему CSS

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

и удалить метку, и вы увидите, что ваш размер правильно.

Попробуйте позиционировать другие элементы.