使用CSS“max-height：100％”的动态图像大小调整不工作在Firefox和IE与固定的页眉/页脚 [英] Dynamic image resize with CSS "max-height:100%" not working in Firefox and IE with fixed header/footer

问题描述

我有一堆麻烦的图像不调整大小在所有在Firefox或IE。我已经建立了一个侧边滚动的照片组合与固定的页眉和页脚，并试图使图像占用两者之间的内容空间的其余部分。我已经安排他们在一个内联列表，使照片滚动横向，所有这些在Chrome中完美的，但图像不会调整大小在Firefox或IE。我试过了一吨不同的东西，没有一个工作。我已经尝试设置max-height，height：calc（），等等。

I'm having a bunch of trouble with images not resizing at all in Firefox or IE. I've built a side-scrolling photo portfolio with a fixed header and footer, and have tried to make the images take up the rest of the content space between the two. I've arranged them in an inline list to make the photos scroll sideways, and all of this works perfectly in Chrome, but the images do not resize at all in Firefox or IE. I've tried a ton of different things, none of which have worked. I've tried setting the max-height, the height:calc(), and so forth.

以下是即时版本。

我使用以下代码：

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中工作。当然，最简单的解决方案是将所有的照片设置为相同的高度（一个小的笔记本电脑屏幕，aprox 500px高？），但我希望这是负责，以最大的格式显示照片，而不会垂直打破屏幕。

My goal is to have the images scale down to fit when shrinking the browser window. Again, the code works great in Chrome, but suddenly stops working in IE and Firefox. Of course, the simplest solution is to set all of the photos to the same height (a small laptop screen, aprox 500px tall?) but I want this to be responcive and to show photos in the largest format possible without breaking the screen vertically.

推荐答案

只需添加 overflow-x：auto

just add overflow-x:auto in

.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;
}

我检查了您的现场版本 检查元素及其工作完美

I checked your live version in inspect element and its working perfectly

这篇关于使用CSS“max-height：100％”的动态图像大小调整不工作在Firefox和IE与固定的页眉/页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！