29.12.23B

Un autre exemple avec 4 de mes images déformées en 800x600px, dimensions qui semblent correspondre au choix de beaucoup. 

<div style="width: 800px; height: 600px; text-align: left; margin: 30px auto;"><img id="hiv1" class="hiv" src="http://ekladata.com/FY7H08UU5ZcAVA-hAsc97K4Clyk.jpg" alt="" /> <img id="hiv2" class="hiv" src="http://ekladata.com/gthbgYXbbMv8LeyT0gOtWsgBRn4.jpg" alt="" /> <img id="hiv3" class="hiv" src="http://ekladata.com/b1R29v-neTq8E3MExFelGEq9O08.jpg" alt="" /> <img id="hiv4" class="hiv" src="http://ekladata.com/lEAI9k8YOR3OR8HGflqNjbqFGx0.jpg" alt="" /></div>
<style><!--
.hiv{position:absolute; z-index:1; width:400px; height:300px; border:4px solid white; box-shadow:6px 6px 8px black; border-radius:50%; filter:grayscale(1); transition:all 1s;}
#hiv1{box-sizing:border-box; transform:translate(0px,0px);}
#hiv2{box-sizing:border-box; transform:translate(400px,0px);}
#hiv3{box-sizing:border-box; transform:translate(400px,300px);}
#hiv4{box-sizing:border-box; transform:translate(0px,300px);}
#hiv1:hover,#hiv2:hover,#hiv3:hover,#hiv4:hover{z-index:5; width:800px; height:600px; border-radius:0%; filter:grayscale(0); transform:translate(0px,0px);}
--></style>

Comme vous le voyez dans mes derniers codes, le principe est toujours le même:

un cadre de 800x600px, alignement à gauche car mon blog est paramétré en alignement centré et centrage du montage dans la page.

L'exemple est pour 4 images mais il peut s'adapter à d'autres quantités.

Rappel: pour dimensionner vos images, au ratio différent de 4/3, il vous suffit de modifier leurs adresses et d'ajouter les dimensions que vous souhaitez:

http://ekladata.com/FY7H08UU5ZcAVA-hAsc97K4Clyk@800x600.jpg

Votre image sera déformée mais aux bonnes dimensions.

Autre attribut déjà signalé: box-sizing:border-box; qui intègre la bordure dans les dimensions de votre image ce qui évite les débordements.