Question

我在Firefox或IE中根本没有调整大小的图像有一堆麻烦。我已经构建了一个带有固定页眉和页脚的横向卷轴照片组合，并试图使图像占据两者之间的其余内容空间。我已将它们安排在内联列表中以使照片向侧面滚动，并且所有这些在Chrome中完美运行，但图像在Firefox或IE中根本不会调整大小。我尝试过很多不同的东西，但都没有。我已经尝试设置max-height，height：calc（）等等。

这是live version。

我使用以下代码：

CSS

.header {
    position: fixed;
    top: 0;
    left: 0;
    height: 110px;
    width: 100%;
    background-color: #fff;
    z-index:9;
}
.photocontainer{
    position: relative;
    display:inline-block;
    float:left;
    top:110px;
    max-height:calc(100% - 155px);
    max-height:-webkit-calc(100% - 155px);
    max-height:-moz-calc(100% - 155px);
    max-height:-ms-calc(100% - 155px);
    max-height:-o-calc(100% - 155px);
    height:auto;
    margin:0px;
    padding:0px;
    left:0px;
    bottom:0px;
    white-space: nowrap;
}
ul.photolistul {
    display:inline-block;
    height:auto;
    max-height:calc(100% - 155px);
    list-style:none;
    /*overflow:scroll;
    overflow-x:hidden;
    overflow-y:hidden;*/
    white-space: nowrap;
    padding:0px;
    margin:0px;
}
li.photolistli { display:inline-block; margin:0px;}
img.photo {
    margin-top:0px;
    display:inline-block;
    height:auto;
    max-height:-webkit-calc(100% - 155px);
    max-height:-moz-calc(100% - 155px);
    max-height:-ms-calc(100% - 155px);
    max-height:-o-calc(100% - 155px);
    width:auto;
    max-width:100%;
    margin-left:110px;

}
.photocount {
    position:fixed;
    bottom:0px;
    left:0px;
    height:35px;
    width:100%;
    background-color:#FFFFFF;
}

HTML

<div style="max-height:100%">
<div class="header">
    <div class="header-navbar">
        TEXT GOES HERE
    </div>
</div>
<div class="photocontainer">
<ul class="photolistul">
    <li class="photolistli"><img class="photo" src="photo1.jpg" alt="" /></li>
    <li class="photolistli"><img class="photo" src="photo2.jpg" alt="" /></li>
    <li class="photolistli"><img class="photo" src="photo3.jpg" alt="" /></li>
    <li class="photolistli"><img class="photo" src="photo4.jpg" alt="" /></li>
    <li class="photolistli"><img class="photo" src="photo5.jpg" alt="" /></li>
    <li class="photolistli"><img class="photo" src="photo6.jpg" alt="" /></li>
    <li class="photolistli"><img class="photo" src="photo7.jpg" alt="" /></li>    
</ul>
</div>
<div class="photocount">
<p class="smalltype" style="margin-left:25px;">:: TEXT GOES HERE ::</p>
</div>

我的目标是在缩小浏览器窗口时缩小图像以适应。同样，该代码在Chrome中运行良好，但突然停止在IE和Firefox中工作。当然，最简单的解决方案是将所有照片设置为相同的高度（一个小的笔记本电脑屏幕，高约500px高吗？）但我希望这是有效的，并且可以在不垂直打破屏幕的情况下以最大格式显示照片。

Answer 1

只需在

中添加overflow-x:auto即可

.photocontainer{
    position: relative;
    display:inline-block;
    float:left;
    top:110px;
    max-height:calc(100% - 155px);
    max-height:-webkit-calc(100% - 155px);
    max-height:-moz-calc(100% - 155px);
    max-height:-ms-calc(100% - 155px);
    max-height:-o-calc(100% - 155px);
    height:auto;
    margin:0px;
    padding:0px;
    left:0px;
    bottom:0px;
    white-space: nowrap;
    overflow-x:auto;
}

我在live version中检查了您的inspect element并且其工作正常

使用CSS“max-height：100％”调整动态图像大小不适用于具有固定页眉/页脚的Firefox和IE

1 个答案: