保持圖像的長寬比

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小於​​width總和。

如果圖片大小爲400px,#sliderwidth必須是800px。