Html 为什么我的图像会不可预测地调整大小？

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

唉，当我垂直缩放浏览器时，图像会破坏纵横比并扭曲。我发现令人困惑的是，如果我从一个压缩的高度浏览器开始，图像加载很小以匹配，并按比例放大，然后相应地缩小。但是，当浏览器启动时，比例会降低。我假设这与我构建#scroller容器的方式有关。但我一点也不明白

我已经尝试过将图像直接放入滚动条。我添加了儿童div，然后把img放进去，我甚至试了一张桌子

我真的不明白

#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;

}

我已将其加载到JSFIDLE中

---

使用

最大高度：100%而不仅仅是
高度：100%

演示

有趣的是，我发现如果我将“子图像位置”属性设置为“绝对”或“固定”，则它们的缩放正确。尽管这打破了定位。我还发现，漂浮在一起的图像彼此重叠是有效的。然后我就可以清除浮子了

谢谢你的回答。仍然对奇怪的功能感到困惑的是，我只能按比例缩小，而不能按比例放大
 我试过了，但不是所有的图像在加载时都是相同的高度，而且它们在某个点上仍然会被垂直压碎。你可以同时使用
height:100%
和
max height:100%
试过了，在大小上仍然有断裂率。使用
max height:100%很难在小提琴内部进行调试，每次都能完美无误地工作。在真正的浏览器中，它仍然无法工作。我将尝试编写一个Js解决方案，因为我担心我可能很难用普通的CSS来实现这一点。
#scroller img { 

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

    }