Я должен отобразить кучу изображений на странице. Изображения имеют разный размер, некоторые очень широкие, а некоторые очень тонкие. Я хочу поместить их все в контейнер фиксированной ширины и фиксированной высоты.

Логика размещения изображений должна быть такой: Скажите, что если изображение меньше контейнера, увеличьте его до максимального размера, чтобы сохранить соотношение сторон, и поместите его в центр контейнера. Если изображение больше, уменьшите его, сохраняя соотношение сторон.

Некоторые примеры: Скажем, наш контейнер 150х150, а у нас изображение размером 100х50. В этом случае изображение должно быть масштабировано до 150х75. Если у нас есть изображение размером 100x300, оно должно быть уменьшено до 50x150.

Хотя это легко сделать с помощью javascript, я бы хотел избежать этого, если это возможно. Мне интересно, есть ли какой-нибудь способ сделать это с помощью только CSS. Я могу жить только с решением CSS3 или даже со специальными директивами webkit / firefox, если они работают в последних версиях Chrome, Firefox и Safari (я буду использовать запасной вариант для IE, если выбора нет).

Edit: Я знаю о максимальной высоте и максимальной ширине, конечно. Проблема заключается в том, что если я установлю max-height и max-width равными 150, изображения не будут масштабироваться, если это необходимо.