firefox - 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

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