Firefox ignora el porcentaje de altura en la imagen

Question

Estoy desarrollando un sitio web para un profesor y tengo un problema con mi CSS en Firefox. El sitio web fue diseñado para ser de ancho/alto fluido, de modo que llenara la pantalla con cualquier resolución, por lo que estoy usando muchos porcentajes para alturas y anchuras. Sin embargo, me he encontrado con un problema con las imágenes.

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

La barra superior de miniaturas debe escala de las imágenes, pero no funciona en Firefox, las imágenes permanecen 100% de su altura original. Funciona bien en Safari (no sé sobre Internet Explorer). Establecí la altura en 100% y el ancho en automático. Espero que escale la imagen al 100% de la altura del div y luego ajuste el ancho en consecuencia.

¿Alguien puede señalar lo que me he perdido?

Answer 1

Necesita dar a la imagen una altura del 100% pero su elemento principal debe tener la altura y el ancho deseados en porcentaje.

Básicamente, haga una DIV que contenga la imagen, otorgue a la DIV el ancho y la altura deseadas en porcentaje o px. Coloque la imagen dentro del DIV y déle 100% de altura.

Así es como Firefox maneja las imágenes.

Answer 2

Me topé con esto también y logré obtener una altura constante en múltiples navegadores usando vh unidades en CSS, por ejemplo max-height: 5vh; como en 5% de la altura de la ventana gráfica.