Firefox ignores percentage image height

Question

I am developing a website for a professor and I have a problem with my CSS in Firefox. The website was designed to be the width / height of the liquid so that it fills the screen at any resolution, so because of this I use a lot of percent for height and width. However, I had a problem with the images.

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

The top panel of thumbnails should scale images, but in Firefox they do not work, images remain at 100% of their original height. It works great in Safari (I don't know about Internet Explorer). I set the height to 100% and the width for the car. I expect it to scale the image to 100% of the height of the div, and then adjust the width accordingly.

Can anyone point out what I missed?

Answer 1

You need to provide an image 100% high, but its parent should be the desired height and width in percent.

Basically create 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 a height of 100%.

This is how Firefox handles images.

Answer 2

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