Cuando hicimos la página web de nuestros amigos de Acuarela Fotógrafos (utilizando el maravilloso tema Jupiter), nos encontramos con una sorpresa: al probar la página en Firefox, en vez de salir unas elegantes fotografías cuadradas como enlace a una muestra de fotografía de bodas, nos encontramos con esto.

Tras investigar utilizando la edición para desarrolladores de Firefox (muy recomendable, por cierto), descubrí el problema: el motor de renderizado de CSS de Firefox no entiende la propiedad max-width:100% si está dentro de un contenedor cuyo display está definido como inline-block.

La solución fue tan sencilla como añadir un “display:block;” a la clase del contenedor padre, pisando así el CSS original del tema y consiguiendo que las imágenes se vean perfectas en cualquier navegador.

Os preguntaréis, por cierto, por qué las imágenes son tan grandes: la respuesta es el diseño adaptado a móviles y las pantallas de alta definición tan vistas. El incremento de tamaño es ínfimo si se hace bien, y el visionado gana mucho..