適合容器高度的圖像

Question

我使用以下代碼構建水平滾動庫。我希望高度超過600像素的圖像適合他們的容器（展覽幻燈片）。如果我使用height屬性而不是img標籤中的最大高度，那麼圖庫佈局會停止響應調整大小。

<div id="exhibit-slides"> 
    <div class="exhibit-slide"> 
    <img src="http://01.jpg" alt="" /> 
    </div> 
    <div class="exhibit-slide"> 
    <img src="http://02.jpg" alt="" /> 
    </div> 
    <div class="exhibit-slide"> 
    <img src="http://03.jpg" alt="" /> 
    </div> 
    <div class="exhibit-slide"> 
    <img src="http://04.jpg" alt="" /> 
    </div> 
</div> 

#exhibit-slides { 
    overflow:auto; 
    width:10000px; 
} 

.exhibit-slide { 
    float:left; 
    margin-right:20px; 
    max-height:600px; 
} 

img { 
    width:auto; 
    max-height:100%; 
} 

任何想法？

在此先感謝

Answer 1

試試這個：

.exhibit-slide { float:left; margin-right:20px; height:600px; **overflow-y:hidden** }