Question

所以我正在开发一个具有侧滚动主要内容元素的照片组合。我一直在玩我之前发现的所有响应技巧，以便在浏览器高度变化时使图像正确缩放。

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

我尝试将图像直接放入#scroller。我添加了儿童divs然后将imgs放入其中，我甚至尝试了一张桌子。

我真的不明白。

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

DEMO http://jsfiddle.net/Za544/1/

#scroller img { 

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

    }

Answer 2

有趣的是，我发现如果我将子图像位置属性设置为绝对或固定，它们会正确缩放。虽然打破了定位。我还发现浮动图像彼此重新相互作用。然后我应该能够清除漂浮物。

感谢您的回答。奇怪的功能仍然让我感到困惑，我只是缩小规模而不是扩大规模。

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

2 个答案: