更改流體圖像縱橫比css

Question

我試圖放置6個圖像一個接一個地用css， 整個事情應該可以在大多數顯示器上很好地縮放（除了目前的移動設備） 因此， VE作出這樣的： http://pelloponisos.telesto.gr/galleryTest/test/gallery.php# （顯然我試圖讓另一個傳送帶）

我的大部分圖像比高度更大的寬度，所以當我縮放他們，我只是把 寬度：X％，在容器裏和100％的圖像寬度。

但第六個圖像是不同的，它會導致相當多的麻煩 我也嘗試設置高度，但您只能根據兩者之一縮放圖像。

迄今爲止工作的唯一方法是在ul中放置一個靜態高度，然後在寬度和高度上進行縮放，但不是流動網格。

有沒有什麼辦法讓所有li元素都有一個流體高度，然後根據那個縮放所有圖像？或者如果不是 是否有任何方法可以使任何圖像具有不同的比例比例到我在css中指定的比例？

Answer 1

我簡化了你的代碼，但是這似乎更接近這個想法。訣竅是在容器中設置寬度（.upper ul li），然後爲圖像使用：max-width：100％;高度：汽車。此外，填充現在是％。

  #carousel{ 
      position:relative; 
      } 
      #wrapper{ 
      margin:0 auto; 
      } 

      #slides{ 
      width: 100%; 
      } 
      .upper ul li{ 
      width: 200px; 
      max-width: 100%; 
      list-style:none outside none; 
      float:left; 
      padding-bottom:5px; 
      padding:2%; 
      } 
      img.galleryThumbnail{ 
      max-width:100%; 
      height:auto; 
      } 
      .info{ 
      display:none; 
      } 

      #buttons img{ 
      position:absolute; 
      top:90px; 
      } 
      #buttons #prev img{ 
      position:absolute; 
      left:29px;} 
      #buttons #next img{ 
      position:absolute; 
      right:21px; 
      }