Image qui dépasse de la div en hauteur

Bonjour,
Je suis en train de coder un site portfolio et j'ai un petit problème qui m'enquiquine depuis plusieurs heures. J'ai plusieurs images de tailles variées.
J'ai une page avec toutes les images, 3 images/lignes (donc width:33%) et je souhaite que chaque image ait un height de 10% afin qu'elles aient toutes la même taille.
Cependant les images supèrieures à une certaines hauteur dépassent de ce 10%.

Voici mon code html :

<div id="portfolio-contenu">
<div class="projet">
<a href="sblabla.html" class="lien-projet">
<img src="img/monimage" alt="" >
</a>
<div class="nom-projet">Titre <p>Soustitre</p></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%;
width: 33.3333333%;
display: inline-block;
}

.projet img{
width: 100%;
-webkit-transition: -webkit-transform 300ms;
-o-transition: -o-transform 300ms;
-moz-transition: -moz-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;
-o-transition: 300ms;
-moz-transition: 300ms;
transition: 300ms;
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
-webkit-filter: blur(0px) grayscale(0%) ;
filter: blur(0px) grayscale(0%);
}

.projet:hover .nom-projet{
transform: translateY(0);
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
transition: linear 350ms;
-webkit-transition: linear 350ms;
-moz-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: #6b131d;
background: #fff;
font-size: 20px;
font-family: 'caviar_dreamsbold';
text-align: center;
}

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

Je ne comprends pas pourquoi ça ne fonctionne pas... Avez vous une idée ?
Autre question, comment faire pour que ce soit le centre de l'image qui s'affiche (par exemple une image beaucoup trop grande pour la div, comment faire pour que ce soit le centre de l'image que l'on voit et pas le haut gauche ?) ?

Merci d'avance pour vos lumières

My website: https://www.webico.vn/
Modifié par ntclick (10 May 2018 - 06:10)

Bonjour,

(pourrais-tu utiliser les balises de codes prévu pour... les codes ? cela rendra la lecture bien plus facile pour tout le monde)

Pour commencer, tu as un height: 10%; qui ne repose sur rien car il n'a aucune référence (tu peux tester avec 20% ou 80%, ça ne changera rien). Ton .projet occupe donc la hauteur de son contenu, ni plus ni moins.
Par contre, si tu choisis une unité fixe telle que les pixels, cela fonctionnera mieux.

La réponse à ta question bonus est object-fit : https://la-cascade.io/utiliser-css-object-fit/

Bonne journée