поддерживать соотношение сторон изображения

Question

У меня есть следующий код:

HTML

<div class="container"> 
      <div class="header"> 
       <h1 class="text-muted">jQuery Basic Slider</h1> 
      </div> 

      <div id="slider"> 
       <ul class="slides"> 
        <li class="slide slide1">slide1</li> 
        <li class="slide slide2">slide2</li> 
        <li class="slide slide3">slide3</li> 
        <li class="slide slide4">slide4</li> 
        <li class="slide slide5">slide5</li> 
        <li class="slide slide1">slide1</li> 
       </ul> 
      </div> 

     </div> 
</body> 

CSS

#slider { 
    width: 720px; 
    height: 400px; 
    overflow: hidden; 
} 

#slider .slides { 
    display: block; 
    width: 6000px; 
    height: 400px; 
    margin: 0; 
    padding: 0; 
} 

.slide { 
    float: left; 
    list-style-type: none; 
    width: 100%; 
    height: 100%; 
} 

/* helper css, since we don't have images */ 
.slide1 {background: url(http://lorempixel.com/400/200/);} 
.slide2 {background: url(http://lorempixel.com/320/180/);} 
.slide3 {background: url(http://lorempixel.com/150/300/);} 
.slide4 {background: url(http://lorempixel.com/480/220/);} 
.slide5 {background: url(http://lorempixel.com/220/200/);} 

Если вы посмотрите на jsfiddle вы можете увидеть, что изображения не являются поддерживая согласованные пропорции. Как получить изображения для всех с одинаковым соотношением сторон?

Answer 1

попробовать этот код

.slides{ 
    height:100%; 
    width:auto; 
    float:left; 
} 

Answer 2

Если вы указываете статические родительские размеры и установите для изображения одинаковые размеры, то он потеряет соотношение сторон. Чтобы он не удалял один из размеров width: 100% или height: 100%.

Также вместо background-image использовать фактическое изображение тег.

Answer 3

Ваш #sliderwidth меньше .slidewidth сумма.

Если изображение соответствует 400px, #sliderwidth должно быть 800px.