css - 适合容器高度的图像

Question

我正在使用以下代码来构建一个水平滚动画廊。我希望高度超过 600 像素的图像适合它们的容器（展览幻灯片）。如果我在 img 标签中使用 height 属性而不是 max-height ，它可以工作，但是画廊布局停止响应调整大小。

<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** }