Firefox会忽略图像上的百分比高度

Question

我正在为一位教授开发一个网站，我在Firefox中遇到了我的CSS问题。该网站设计为流体宽度/高度，因此它可以在任何分辨率下填充屏幕，因此我使用了很多百分比的高度和宽度。然而，我遇到了图像问题。

http://projects.mediabounds.com/i.bradley.edu/

顶部的缩略图应该缩放图像，但它在Firefox中不起作用，图像保持原始高度的100％。它在Safari中工作正常（不了解Internet Explorer）。我将高度设置为100％，宽度设置为自动。我希望它将图像缩放到div的高度的100％，然后相应地调整宽度。

有谁可以指出我错过了什么？

Answer 1

您需要为图像指定100％的高度，但它的父元素需要是所需的高度和宽度（百分比）。

基本上制作包含图像的DIV，为DIV提供所需的宽度和高度，以百分比或px为单位。将图像放在DIV内并使其高度为100％。

这就是Firefox处理图像的方式。

Answer 2

我也遇到了这个问题，我设法使用CSS中的vh单位在多个浏览器中获得一致的高度，例如max-height: 5vh;，与视口高度的5％相同。