[Résolu] Flexbox et galerie photos

Bonjour,

J'ai construit une galerie photo en utilisant Flexbox.

Mon souci est que sur la dernière ligne, les photos sont surdimensionnées notamment celles en format portrait.

J'ignore pourquoi. Et vous ?

Merci

La partie HTML :

<section id="photo">
			<h3>Photos</h3>
			<div id="galerie">
				<img src="images/boise-downtown-1387405.jpg" alt="" />
				<img src="images/portrait-1552273.jpg" alt="" />
				<img src="images/escalante-2-1391686.jpg" alt="" />
				<img src="images/portrait-girl-1437697.jpg" alt="" />
				<img src="images/lisa-1435408.jpg" alt="" />
				<img src="images/color-stripes-1169611.jpg" alt="" />
				<img src="images/boise-downtown-1387405.jpg" alt="" />
				<img src="images/portrait-1552273.jpg" alt="" />
				<img src="images/escalante-2-1391686.jpg" alt="" />
				<img src="images/portrait-girl-1437697.jpg" alt="" />
				<img src="images/lisa-1435408.jpg" alt="" />
				<img src="images/color-stripes-1169611.jpg" alt="" />
				<img src="images/boise-downtown-1387405.jpg" alt="" />
				<img src="images/portrait-1552273.jpg" alt="" />
				<img src="images/escalante-2-1391686.jpg" alt="" />
				<img src="images/portrait-girl-1437697.jpg" alt="" />
				<img src="images/lisa-1435408.jpg" alt="" />
				<img src="images/color-stripes-1169611.jpg" alt="" />
			</div>
		</section>

La partie CSS :

/* PHOTOS */
#photo {
	max-width: 100%;
	margin: auto;
	padding: 2rem 0;
}

#galerie {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

#galerie img {
	flex: 1 1 auto;
	width: auto;
	height: auto;
	max-width: 300px;
	max-height: 130px;
	margin: 0.5rem;
	object-fit: cover;
	border: 1px solid #28323B;
	border-radius: 5px;
	box-shadow: 2px 2px 2px #28323B;
	transform: scale(1);
	transition: transform 1s;
}

#galerie img:hover {
	transform-origin: 50% 50%;
	transform: scale(2);
	z-index: 999;
	border-radius: 5px;
	box-shadow: none;
}
/* FIN PHOTOS */

#galerie img {
flex: 1 1 auto;

Si je ne me trompe pas, le premier 1 indique que l'image doit prendre toute la largeur disponible.
Si tu ne veux pas que tes images restent à gauche, mais ne s'étirent pas, tu peux mettre l'attribut justify-content à "space-around" au lieu de "center".
Jettes un coup d'œil à cette page : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Je trouve que c'est une des meilleures niveau explication (et très simple !!)
Modifié par mistiru (01 Aug 2017 - 23:32)

Bonjour.

Sur mon navigateur, je ne constate pas ce comportement : les "lignes pleines" d'images s'étirent bien jusqu'au bord excepté la dernière ligne dont les images sont centrées. (Ce qui ne veut nullement dire que ça doit être le comportement standard.)

@mistiru : je ne saisis pas ce que vous dites. "space-around" et "center" ne changent rien si il n'y a pas d'espace restant. Or, chez Marie08, c'est le cas.

Bonjour et merci à tous les deux de votre réponse

Effectivement Mistiru, si je mets flex-grow à 0, je n'ai plus ce problème d'image sur la dernière ligne. Je regrette de ne pas y avoir pensé moi-même !

En revanche, je laisse mon justify-content à center parce que le space-around provoque un écart des dernières photos très laid à mon goût

Et comme le disait (il me semble très justement) Zelena, space-around ou center ne changeaient rien à mon problème d'image sur la dernière ligne.

Merci beaucoup