html - 为什么我的图像调整大小不可预测？

Question

所以我正在制作一个包含横向滚动主要内容元素的照片组合。我一直在尝试我发现的所有以前的响应技巧，以使图像随着浏览器高度的变化而适当缩放。

唉，当我垂直缩放浏览器时，图像打破了纵横比并扭曲了。令我感到困惑的是，如果我从高度受限的浏览器开始，图像会加载得很小以匹配并按比例放大，然后相应地缩小。然而，当浏览器开始变大时，比例缩小会打破比例。我假设这与我构建 #scroller 容器的方式有关。但我一点也不聪明

我试过将图像直接放入#scroller。我添加了子 div，然后将 img 放入其中，我什至尝试了一张 table 。

我真的不明白。

#scroller { 
    position:absolute;
    top:8%;
    height:80%; 
    width:auto;
    background-color:#FFFFFF;
    z-index:1;
    padding:10px 0 10px 252px;
    white-space:nowrap;
}


#scroller img {
    height:100%;
    display:inline-block;
    width:auto;

}

我已将其加载到 JsFiddle 中。

http://jsfiddle.net/Za544/

Answer 1

使用 max-height:100%; 而不仅仅是 height:100%;

演示 http://jsfiddle.net/Za544/1/

#scroller img { 

    max-height:100%; 
    display:inline-block;
    width:auto;
    white-space:normal;

    }