La soluzione e` semplice, se puoi fare un minimo di controllo lato server.

Lato client devi preparare tanti spazi quadrati (in linea di massima saranno dei <div> oppure dei <li>, a seconda del contesto), con le dimensioni che vuoi tu (possiamo pensarli 200x200px, ma la cosa funziona anche se sono definiti con altre unita` di misura. E` importante che la dimensione sia definita, altrimenti il 100% successivo non funziona.

Dentro a ciascuno di questi spazi ci devi mettere le tue immagini (tag <img>) in cui devi definire solo una dimensione al 100%.

In pratica le immagini verticali dovrebbero venir inserite con un tag che al browser arriva:
<img src="..." alt="..." style="height:100%" />

mentre le immagini orizzontali:
<img src="..." alt="..." style="width:100%" />

Nota che ho inserito lo stile in linea, per semplificare la formattazione lato server; in alternativa puoi definire rispettivam:
<img src="..." alt="..." class="imgvert" />
<img src="..." alt="..." class="imgorizz" />

e definire rispettivamente height e width nelle due classi

E` chiaro che lato server devi sapere se l'img e` vert o orizz, ed aggiungere lo style o la classe corrispondente.
Come fare questo, se nonlo sai fare da solo, dovresti chiederlo nel forum lato server che si occupa della tecnologia che usi.