Firefox ignores percent height on image

Question

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?

Furrow

I've been using Firebug/Web Developer Toolbar to try and track problems in my CSS. According to Firebug, the img is getting the value of 100% height and auto width. – Furrow

1. Can't see the "top bar of thumbnails" you're talking about. 2. If you don't get an answer here you could try posting over on doctype.com – Calumniation

I got a similar issue in FF and IE. Works fine in Chrome. – Magnanimous

Answer 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.

Risk

Answer 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.

Flatiron