响应式图像最大高度100%在Firefox中无效

Question

我正在尝试根据浏览器尺寸调整图像大小.我设法让图像水平调整大小,如果我使浏览器窗口缩小,图像将按比例调整大小.然而,当我垂直调整窗口大小时,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中垂直调整大小,但我必须在开始执行此操作之前将浏览器的底部拖到图像上.一旦底部内容填充"击中"图像的底部,我宁愿重新开始重新设置图像.希望这是有道理的.

任何帮助非常感谢

Answer 1

由于高度可能会永远持续下去，因此您无法将任何相对于浏览器窗口的高度设置为百分比的函数。我的意思是，您需要将其放在具有固定高度的物体内才能使用百分比值。祝你好运！

-b