Firefox忽略图片的百分比高度 [英] Firefox ignores percent height on image

问题描述

我正在为一位教授开发一个网站，而且我在Firefox中遇到了一个问题。网站被设计成流体宽度/高度，所以它会填满屏幕的任何决议，因此，我使用了很多百分比的高度和宽度。然而，我遇到了一个图像问题。

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

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

任何人都可以指出我错过了什么吗？

解决方案

你需要给图像100％的高度，但它的父元素需要是百分比所需的高度和宽度。 p>

基本上做一个包含图像的DIV，以百分比或px给DIV所需的宽度和高度。将图像放在DIV中，并给它100％的高度。

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

I'm developing a Web site for a professor and I'm having an issue with my CSS in Firefox. The Web site was designed to be fluid width/height so it would fill the screen on any resolution, so because of that I'm using a lot of percentages for heights and widths. I've run into a problem with images however.

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

The top bar of thumbnails should scale the images, but it doesn't work in Firefox, the images stay 100% their original height. It works fine in Safari (don't know about Internet Explorer). I've set the height to 100% and width to auto. I expect it to scale the image to 100% the height of the div and then adjust the width accordingly.

Can anyone point out what I've missed?

解决方案

You need to give the image a height of 100% but it's parent element needs to be the desired height and width in percentage.

Basically make a DIV containing the image, give the DIV the desired width and height in percent or px. Place the image inside the DIV and give it 100% height.

That's just the way Firefox handles images.

这篇关于Firefox忽略图片的百分比高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！