具有固定高度和可變寬度圖像的滑塊

Question

我試圖創建具有固定高度和可變寬度圖像的滑塊。我需要滑塊爲頁面的100％寬度，並且可以響應瀏覽器視口。

我不想使用JS。

HTML

<div id="photoframeContainer"> 
    <div id="photoframe"> 
    <div class="imageContainer"><img id="theImage" src="uploads/picture02.jpg" alt=""></div> 
    <div class="imageContainer"><img id="theImage" src="uploads/picture03.jpg" alt=""></div> 
    <div class="imageContainer"><img id="theImage" src="uploads/picture04.jpg" alt=""></div> 
    <div class="imageContainer"><img id="theImage" src="uploads/picture05.jpg" alt=""></div> 
    <div class="imageContainer"><img id="theImage" src="uploads/picture06.jpg" alt=""></div> 
    <div class="imageContainer"><img id="theImage" src="uploads/picture07.jpg" alt=""></div> 
    <div class="imageContainer"><img id="theImage" src="uploads/picture08.jpg" alt=""></div> 
    </div> 
</div> 

以前的失敗嘗試的小提琴

fiddle

這是一次嘗試，以達到我想要的小提琴，但是頁面不在瀏覽器調整大小時響應，圖像重疊並且行爲不符合預期。

Answer 1

您可以通過簡化的HTML實現佈局（BTW ID必須是唯一的，所以你不應該用理智的ID上的所有圖像）：

DEMO

<div id="photoframe"> 
    <img class="test" src="" alt="" /> 
    <img class="test" src="" alt="" /> 
    ... 
</div> 

CSS ：

body, html { 
    height:100%; 
    margin:0; 
} 

#photoframe { 
    white-space:nowrap; 
    height:50%; 
} 
img { 
    height:100%; 
    width:auto; 
}