适合容器高度的图像

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