所以我正在制作一个包含横向滚动主要内容元素的照片组合。我一直在尝试我发现的所有以前的响应技巧,以使图像随着浏览器高度的变化而适当缩放。
唉,当我垂直缩放浏览器时,图像打破了纵横比并扭曲了。令我感到困惑的是,如果我从高度受限的浏览器开始,图像会加载得很小以匹配并按比例放大,然后相应地缩小。然而,当浏览器开始变大时,比例缩小会打破比例。我假设这与我构建 #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 中。
最佳答案
使用 max-height:100%;
而不仅仅是 height:100%;
演示 http://jsfiddle.net/Za544/1/
#scroller img {
max-height:100%;
display:inline-block;
width:auto;
white-space:normal;
}
关于html - 为什么我的图像调整大小不可预测?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22885689/