Muszę wyświetlić kilka obrazów na stronie. Obrazy są różnej wielkości, niektóre bardzo szerokie, a niektóre bardzo cienkie. Chcę umieścić je wszystkie w pojemniku o stałej szerokości i stałej wysokości.

Logika umieszczania obrazów powinna wyglądać następująco: Powiedz, że obraz jest mniejszy niż pojemnik, przeskaluj go do maksymalnego rozmiaru, tak aby proporcje były zachowane, i umieść je w środku pojemnika. Jeśli obraz jest większy, zmniejsz go, zachowując proporcje.

Kilka przykładów: Powiedzmy, że nasz kontener ma rozmiar 150x150 i mamy obraz o rozmiarze 100x50. W takim przypadku obraz powinien być skalowany do 150x75. Jeśli mamy obraz o rozmiarze 100x300, obraz powinien być skalowany do 50x150.

Chociaż można to łatwo zrobić za pomocą javascript, chciałbym tego uniknąć, jeśli to możliwe. Zastanawiam się, czy jest jakiś sposób, aby to osiągnąć za pomocą samego CSS. Mogę żyć z rozwiązaniem tylko dla CSS3, a nawet z dyrektywami specyficznymi dla webkit / firefox, pod warunkiem, że działa ono na najnowszych wersjach Chrome, Firefox i Safari (w przypadku IE nie użyję rezerwy dla IE).

Edytować: Wiem oczywiście o maksymalnej wysokości i maksymalnej szerokości. Problem polega na tym, że jeśli ustawię zarówno max-height, jak i max-width na 150, obrazy nie będą skalowane w razie potrzeby.