Eu tenho que exibir um monte de imagens em uma página. As imagens são de tamanhos diferentes, algumas muito largas e outras muito finas. Eu quero colocá-los todos em um contêiner de largura fixa e altura fixa.

A lógica de colocar as imagens deve ser assim: Diga se a imagem é menor que o contêiner, dimensione-a até o tamanho máximo de modo que a proporção seja mantida e coloque-a no centro do contêiner. Se a imagem for maior, diminua a escala mantendo a proporção.

Alguns exemplos: digamos que nosso contêiner é de 150 x 150 e temos uma imagem de tamanho 100 x 50. Neste caso, a imagem deve ser ampliada para 150x75. Se tivermos uma imagem de tamanho 100x300, a imagem deve ser reduzida para 50x150.

Embora isso possa ser feito facilmente com o javascript, eu gostaria de evitar isso, se possível. Eu estou querendo saber se há alguma maneira de conseguir isso com CSS sozinho. Eu posso viver com uma única solução CSS3, ou mesmo com diretivas específicas do webkit / firefox, contanto que ele funcione nas versões mais recentes do Chrome, Firefox e Safari (vou usar um substituto para o IE se não houver escolha).

Editar: Eu sei sobre max-height e max-width, claro. O problema é que, se eu definir max-height e max-width como 150, as imagens não serão dimensionadas, se necessário.