Aide mise en page d'un portfolio

Bonjour

j'essaie actuellement de créer un site portfolio et il y a quelques petites choses que je n'arrive pas à faire.
Voilàa ce que je souhaiterai :
Tout d'abord la page portfolio sera composé d'un bloc d'images de même taille. Lors d'un hover sur l'image, le titre du projet apparait. Lors d'un clic, l'utilisateur est dirigé vers la page du projet en question avec description etc. Voici les spécificités que je souhaite
- un portfolio qui prenne toute la largeur de la page
- tout les bloc d'image font la même taille
- je souhaite 4 images par lignes
- lors du redimensionnement de la fenêtre, seule la largeur des bloc changerait, la hauteur doit resté la même
- étant donné que la largeur de l'image change en fonction de la taille de la fenêtre, j'aimerai que les images ne soient pas redimensionné, mais "tronquer" sur les cotés, en fait, que le redimensionnement se fasse par rapport au centre et cache seulement les cotés gauches et droit.

Actuellement, voici mon code HTML

          <div id="portfolio-contenu">
           <div class="projet print">
               <a href="page.html" class="lien-projet">
                   <img src="img/image.jpg" alt="" class="">
               </a>
               <div class="nom-projet">nom <p>sous titre</p></div>
           </div>
<div class="projet print">
               <a href="page.html" class="lien-projet">
                   <img src="img/image.jpg" alt="" class="">
               </a>
               <div class="nom-projet">nom <p>sous titre</p></div>
           </div>
<div class="projet print">
               <a href="page.html" class="lien-projet">
                   <img src="img/image.jpg" alt="" class="">
               </a>
               <div class="nom-projet">nom <p>sous titre</p></div>
           </div>
<div class="projet print">
               <a href="page.html" class="lien-projet">
                   <img src="img/image.jpg" alt="" class="">
               </a>
               <div class="nom-projet">nom <p>sous titre</p></div>
           </div>
<div class="projet print">
               <a href="page.html" class="lien-projet">
                   <img src="img/image.jpg" alt="" class="">
               </a>
               <div class="nom-projet">nom <p>sous titre</p></div>
           </div>
           

           </div>

et le css associé :

#portfolio-contenu{
	margin-top: 25px;
    text-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: center;
    -webkit-align-items: stretch;
    -moz-flex-wrap: wrap;
    -moz-justify-content: center;
    -moz-align-items: stretch;
    -ms-flex-wrap: wrap;
    -ms-justify-content: center;
    -ms-align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    text-align: center;
}

.projet{
	overflow: hidden;
	position: relative;
	height: 10%;
	max-height: 300px;
	width: 25%;
	display: inline-block;}
.projet img{
	width: 100%;
	height: 300px;
	-webkit-transition: -webkit-transform 300ms;
	transition: transform 300ms;
	-webkit-filter: blur(0.2px) grayscale(100%) ;
  filter: blur(0.2px) grayscale(100%);
	background-position: center;
	background-size: cover;
}

.projet:hover img {
    -webkit-transition: 300ms;
    transition: 300ms;
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
		-webkit-filter: blur(0px) grayscale(0%) ;
	  filter: blur(0px) grayscale(0%);
}

.projet:hover .nom-projet{
    transform: translateY(0);
    -webkit-transform: translateY(0);
    transition: linear 350ms;
    -webkit-transition: linear 350ms;
}

.nom-projet {
    transition: linear 350ms;
    -webkit-transition: linear 350ms;
    -moz-transition: linear 350ms;
    position: absolute;
    left: 0;
    right: 0;
    bottom:0;
    transform: translateY(100%);
    -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    padding: 15px 10px;
    color: #fff;
    background: #726222;
    font-size: 20px;
    font-family: 'caviar_dreamsbold';
    text-align: center;
}

.nom-projet p{
    color: #fff;
    font-size: 15px;
    font-family: 'caviar_dreamsbold';
    text-align: center;
}

Donc actuellement, il y a bien 4 images par ligne, le hover et le clic fonctionnent bien. Lors du redimensionnement de la fenêtre, la hauteur reste fixe et la largeur change. Jusque là tout va bien.
Par contre les images sont redimensionné donc les proportions ne sont pas respectées.

Savez vous comment faut il faire ?

Ce projet me tient vraiment à coeur

Merci par avance