问题
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.
来源：https://stackoverflow.com/questions/2090989/firefox-ignores-percent-height-on-image