Skalowanie obrazka w HTML maksymalnie do rozmiarów oryginału

Witam,

Chciałbym umieścić na stronie dwie ramki podzielone w pionie 50%/50% a w nich obrazki. Każdy z nich w oryginale ma wymiary 800x600 px i w tej postaci są zaprezentowane w głównej galerii. Chcę dodać stronę porównawczą, która wyświetlałaby te obrazki w 2 ramkach (kolumnach) w szerokości 90% ramki, lecz nie większej od oryginalnego rozmiaru. Gdy ktoś używa monitora o rozdzielczości w poziomie ponad 1600 px aby nie były skalowane ponad ich rzeczywisty rozmiar.

Bez JS się niestety nie obędzie… Z tego co wiem to czysty HTML nie oferuje takich możliwości. Ewentualnie max-width, max-height z css.

To dobry pomysł zdefiniować w css parametry max-width i max-height, tylko do jakiego elementu? Czy może być to własny wywoływany na stronie przez . Nie znałem ich do tej pory, mógłbyś przedstawić przykład użycia w definicji stylu?

http://codepen.io/anon/pen/DLBfy