Firefox ignores percent height on image

问题:

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?

回答1:

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.

回答2:

I bumped into this as well and I managed to get a consistent height across multiple browsers using vh units in CSS, for example max-height: 5vh; as in 5% of the viewport height.