Tengo que mostrar un montón de imágenes en una página. Las imágenes son de diferente tamaño, algunas muy anchas y otras muy finas. Quiero ponerlos todos en un contenedor de ancho fijo y altura fija.

La lógica de colocar las imágenes debe ser así: diga si la imagen es más pequeña que el contenedor, amplíela al tamaño máximo para que se mantenga la relación de aspecto y colóquela en el centro del contenedor. Si la imagen es más grande, disminúyala mientras mantiene la relación de aspecto.

Algunos ejemplos: Supongamos que nuestro contenedor es de 150x150 y tenemos una imagen de tamaño 100x50. En este caso, la imagen debe ampliarse hasta 150x75. Si tenemos una imagen de tamaño 100x300, la imagen debe reducirse a 50x150.

Si bien esto se puede hacer fácilmente con javascript, me gustaría evitar eso si es posible. Me pregunto si hay alguna manera de lograr esto con CSS solo. Puedo vivir con una solución solo para CSS3, o incluso con directivas específicas de webkit / firefox, siempre y cuando funcione en las últimas versiones de Chrome, Firefox y Safari (usaré una alternativa para IE si no hay otra opción).

Editar: Sé de altura máxima y anchura máxima, por supuesto. El problema es que si configuro la altura máxima y la anchura máxima en 150, las imágenes no se ampliarán si es necesario.