Firefox忽略图像的百分比高度

Question

7

我正在为一位教授开发一个网站，但在Firefox浏览器中遇到了CSS问题。该网站的设计是流式宽度/高度，以便在任何分辨率下都可以填满屏幕，因此我使用了很多百分比来设置高度和宽度。然而，我在图片方面遇到了问题。

顶部的缩略图栏应该按比例缩放图片，但在Firefox中不起作用，图像保持100%的原始高度。在Safari中它运行良好（不知道Internet Explorer）。我已将高度设置为100％，宽度设置为自动。我希望它将图像缩放到div的100％高度，然后相应地调整宽度。

有人能指出我错过了什么吗？

- user253711

我一直在使用Firebug/Web Developer工具栏来尝试跟踪CSS中的问题。根据Firebug的显示，img元素的高度值为100%，宽度值为自动调整。 - user253711

- Alconja

1

我在FF和IE中遇到了类似的问题。在Chrome中正常工作。 - Benny Jobigan

2个回答

1

我也遇到了这个问题，我使用CSS中的vh单位来实现在多个浏览器中保持一致的高度，例如max-height: 5vh;表示视口高度的5%。

- Alex Pop

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1081070 · Accepted Answer

您需要将图像的高度设置为100％，但其父元素的高度和宽度需要以百分比为单位。

基本上，制作一个包含图像的DIV，给予DIV所需的宽度和高度（可以是百分比或px），将图像放置在DIV内并将其高度设置为100％。

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