响应式图像最大高度100％不工作在Firefox

2018-06-03 05:01:31

我目前正在尝试根据浏览器尺寸调整图片大小。我已经设法让图像水平调整大小，如果我让浏览器窗口缩小图像将按比例调整大小。但是，当我垂直调整窗口大小时，Firefox似乎并不想这样做！代码非常简单

<body>

    <div id="content">
        <img src="images/abc.jpg">
    </div>      

</body>

和CSS：

#content {  
    height: 100%;
    padding: 50px;
}


#content img{
    max-height:100%;
    max-width: 100%;
}

另一个问题是，图像似乎在Chrome浏览器中垂直调整大小，但在开始执行此操作之前，必须将浏览器底部的图像放在图像上方。可以这么说，只要底部内容填充“撞到”图像的底部，我宁愿图像开始重新渲染。希望这是有道理的。

任何帮助非常感谢

试试这个，取自Twitter引导2

html,body{height:100%;}
#content {padding: 5%;}
#content img {
max-height: 100%;/* Part 1: Set a maxium relative to the parent */
width: auto9;
/* IE7-8 need help adjusting responsive images */
max-width: auto; 
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}

因为高度可能永远持续下去，所以不能将任何相对于浏览器窗口的高度设置为百分比函数。我要说的是，你需要把它放在一个固定高度的东西里，以便使用百分之一的价值。祝你好运！

-b

您只指定了“最大高度”和“最大宽度”属性。如果您没有指定实际的“宽度”或“高度”属性，则图像初始化将获取其物理尺寸的宽度和高度（如果不大于指定的最大高度和最大宽度）。

说，你注意到的行为是正确的。正如已经提到的，答案是指定一个初始宽度或高度属性，取决于您的图像是纵向还是横向。

链接地址: http://www.djcxy.com/p/11067.html

上一篇: Responsive image max height 100% doesnt work in firefox

下一篇: How to correctly include uncertainties in fitting with python