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

Pour l'image centrer je pense que ça devrais marcher ça : 

img {
    vertical-align: middle;
}

pour le reste il me faudrais ton code pour mieux y voir personnellement 

Salut,

height ne peut pas avoir une valeur en pourcentage si le parent de l'élément n'a pas une valeur height définie. Du reste, c'est sur l'image qu'il faut mettre une taille, pas au conteneur.

Autre point : https://www.emmanuelbeziat.com/blog/prefixes-css-jusqua-quand/

Bonsoir,

Il faut que tu fasses un display:block;

sur ton id projet

Essaye,

Bonne soirée

ExPoZzeD a écrit:

Bonsoir,

Il faut que tu fasses un display:block;

sur ton id projet

Essaye,

Bonne soirée

... hein ?

Merci pour vos réponses

ExPoZzeD : je ne pense pas que ce soit ça, ça change juste ma mise en page x)

kenta : ça permet d'aligner l'image si elle est plus petite que la div non ?

rhooManu : d'accord je te remercie, et je vais regarder ton lien attentivement