Images dans cadre de même dimension

Bonjour a tous,

Je suis stagiaire en informatique et je refait le site web d'une entreprises.
J'ai un petit problème dont je n'arrive pas à trouver la solution :
J'ai plein d'image de différentes taille et j'aimerai que celles-ci aient tous un cadre de même dimension sans pour autant étirer l'image.
J'espère que ma question est assez claire
Merci d'avance pour vos réponses.

Voici mon code css :

.imgpartenaire {
display:inline-block;
padding : 10px;
border: 1px solid #CCC;
box-shadow: 0px 0px 5px #BBB;
margin-left:15px;
margin-top:15px;
width:30%;
border-radius:5%;
}


Modifié par Billybilly (27 Jun 2019 - 14:57)

Salut,
Tu as le HTML?
Ta classe est appliquée directement à l'image? Si oui, essaie plutôt de placer chaque image dans une div avec width et height fixes

.imgpartenaire {
padding : 10px;
border: 1px solid #CCC;
box-shadow: 0px 0px 5px #BBB;
margin-left:15px;
margin-top:15px;
width: 200px;
height: 200px;
border-radius:10px;
}
.imgpartenaire img {
display: block
max-width: 100%;
height: auto;
margin: auto;
}
 

<div class="imgpartenaire"><img src="mon_image" alt=""></div>

Salut Merci de ta réponse, oui j'ai html avec l'astuce que tu viens de me donner, cependant je n'ai pas le rendu souhaité, les images vont à la ligne alors que je voudrai en avoir 3 sur la même ligne
Code html :

<div class="imgpartenaire">
<img alt="" src="http://tuyauterie-industrielle.net/wp-content/uploads/2019/06/cef1.jpg"/>
</div> <!-- image C.E.F nord -->

<div class="imgpartenaire">
<img alt="" src="http://tuyauterie-industrielle.net/wp-content/uploads/2019/06/engie.png" />
</div> <!-- image ENGIE -->

<div class="imgpartenaire">
<img alt="" src="http://tuyauterie-industrielle.net/wp-content/uploads/2019/06/gima.png" />
</div> <!-- image GIMA -->
Maintenant j'ai le rendu la :
Modifié par Billybilly (27 Jun 2019 - 16:42)

Tu connais flexbox? Renseigne toi dessus ca va te changer la vie

.conteneur_flex {
display: flex;
flex-direction: row; /*valeur par défaut. Sinon tu peux mettre column si tu veux un affichage "classique" */
flex-wrap: wrap; /*Pour autoriser le passage à la ligne*/
justify-content: center; /*Pour centrer tes élements*/
}

<div class="conteneur_flex">
<div class="imgpartenaire">
<img alt="" src="http://tuyauterie-industrielle.net/wp-content/uploads/2019/06/cef1.jpg"/>
</div> <!-- image C.E.F nord -->

<div class="imgpartenaire">
<img alt="" src="http://tuyauterie-industrielle.net/wp-content/uploads/2019/06/engie.png" />
</div> <!-- image ENGIE -->

<div class="imgpartenaire">
<img alt="" src="http://tuyauterie-industrielle.net/wp-content/uploads/2019/06/gima.png" />
</div> <!-- image GIMA -->
</div>

Oui, si tu ne veux pas avoir à mettre de hauteur fixe (ce que tu veux généralement éviter pour faire du responsive) il faut utiliser flexbox.

Bonjour tout d'abord merci beaucoup pour vos réponses, j'ai essayé et merci beaucoup j'ai déjà bien avancer comparer au début cependant je n'ai pas le résultats souhaité sur ma page,



J'aimerai pouvoir centrer les images dans le cadre mais je n'arrive pas à le faire
Mais impossible d'arriver à ce résultat
Modifié par Billybilly (01 Jul 2019 - 08:55)

Peux-tu mettre ton CSS et HTML actuel? Si possible dans un codepen

Oui pas de soucis tien :

					<div class="conteneur_flex">
						
							
							<div class="imgpartenaire">			
								<a onclick="window.open(this.href); return false;" href="https://www.cefnord.com/"> <!-- Ouverture du lien 			dans un nouvel onglet -->
 	 							<img alt="" src="http://tuyauterie-industrielle.net/wp-content/uploads/2019/06/cef1.jpg"/> 
								</a>
							</div> <!-- image C.E.F nord -->

							<div class="imgpartenaire">
								<a onclick="window.open(this.href); return false;" href="https://www.engie.com/">
									<img  alt="" src="http://tuyauterie-industrielle.net/wp-content/uploads/2019/06/engie.png"  /> 
								</a> 
							</div> <!-- image ENGIE -->
																					
							<div class="imgpartenaire">
								<a onclick="window.open(this.href); return false;" href="https://www.gima.fr/">
									<img alt="" src="http://tuyauterie-industrielle.net/wp-content/uploads/2019/06/gima.png"  /> 
								</a> 
							</div> <!-- image GIMA -->
											
								<div class="imgpartenaire">
							<a onclick="window.open(this.href); return false;" href="https://tereos.com/fr/">
								<img  alt="" src="http://tuyauterie-industrielle.net/wp-content/uploads/2019/06/tereos.png"  /> <!-- image TEREOS -->
							</a>
								</div>
																						
							<div class="imgpartenaire">	
							<a onclick="window.open(this.href); return false;" href="http://www.vnf.fr/">
								<img alt="" src="http://tuyauterie-industrielle.net/wp-content/uploads/2019/06/VNF.jpg"  /> <!-- image VNF-->
							</a>
							</div>
								
							<div class="imgpartenaire">	
							<a onclick="window.open(this.href); return false;" href="https://www.cetim.fr/">
								<img  alt="" src="http://tuyauterie-industrielle.net/wp-content/uploads/2019/06/cetim.jpg"  /> <!-- image CETIM-->
							</a>
							</div>

							<div class="imgpartenaire">	
							<a onclick="window.open(this.href); return false;" href="https://www.arkema.fr/fr/">
								<img  alt="" src="http://tuyauterie-industrielle.net/wp-content/uploads/2019/06/arkema.png"  /> <!-- image Arkema -->
							</a>
							</div>

							<div class="imgpartenaire">	
							<a onclick="window.open(this.href); return false;" href="https://www.suez.fr/fr-fr">
								<img  alt="" src="http://tuyauterie-industrielle.net/wp-content/uploads/2019/06/suez.jpg"  /> <!-- image Suez-->
							</a>
							</div>							
						</div>
 

.conteneur_flex {
display: flex;
flex-direction: row; /*valeur par défaut. Sinon tu peux mettre column si tu veux un affichage "classique" */
flex-wrap: wrap; /*Pour autoriser le passage à la ligne*/
justify-content: center; /*Pour centrer tes élements*/
}

.imgpartenaire {
padding : 10px;
border: 1px solid #CCC;
box-shadow: 0px 0px 5px #BBB;
margin-left:15px;
margin-top:15px;
width: 200px;
height: 200px;
border-radius:10px;
}

.imgpartenaire img {
display :block;
max-width: 100%;
height: auto;
margin:auto;
max-height : 180px;
}

Désolé pour la longueur du code et merci pour la réponse aussi rapide

Ah oui effectivement,
Merci beaucoup je ne connaissais pas Flexbox merci de me l'avoir fait découvrir.
C'est parfait exactement le résultat souhaité merci bonne journée à toi