Aligner des images verticalement et horizontalement

Bonjour,

J'essaie d'aligner un grand nombre d'images sur ma page. Elles s'alignent bien horizontalement, mais il y a de gros espaces verticaux et j'aimerais que mes images soient collées... (image à l'appui)



Voici mon code :

HTML (je montre que le début parce-que c'est toujours la même chose):

<div class = image>
	<a href="img/cake.jpg"><img src="img/cake.jpg"></a>
</div>

<div class = image>
	<a href="img/donuts.jpg"><img src="img/donuts.jpg"></a>
</div>

<div class = image>
	<a href="img/luciie.jpg"><img src="img/luciie.jpg"></a>
</div>

CSS (pareil je montre que la partie image) :

img{
	width:15%;
}
.image img{
	transition: all 0.3s ease;
	float: left;
	margin: 2px;
}

.image:hover img {
	transform:scale(1.25);
}

Voila voila merci à ceux qui m'aideront
Modifié par Brocoli (07 Dec 2022 - 12:11)

Bonjour,
En utilisant la propriété display:flex avec quelques paramètres, tu devrais obtenir un résultat plus satisfaisant. Cependant, si les formats de tes images sont très variés, ce ne sera sans doute pas aussi optimal que ce que tu pourrais obtenir avec du javascript du style https://masonry.desandro.com/

Pour le flex, ça devrait ressembler à ça, en enlevant le float:left des images.

<div class="container">
    <div class = image>
	<a href="img/cake.jpg"><img src="img/cake.jpg"></a>
    </div>
    <div class = image>
	<a href="img/donuts.jpg"><img src="img/donuts.jpg"></a>
    </div>
    <div class = image>
	<a href="img/luciie.jpg"><img src="img/luciie.jpg"></a>
    </div>
...
</div>

.container { 
    display:flex; 
    flex-wrap: wrap; /* Permet le retour à la ligne*/
    justify-content: space-between;
    align-items: center; /* Pour l'alignement vertical */
}

Pour simplifier, tu devrais pouvoir enlever les <div class="image">
Bon, je n'ai pas testé, donc, à ajuster.
De la doc ici:
https://www.alsacreations.com/outils/lire/1719-flexbox-cheat-sheet-pense-bete.html
et ici:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Modifié par loicbcn (07 Dec 2022 - 12:41)

Salut,

je passe en coup de vent afin d'indiquer que l'élément <img> a 2 attributs obligatoires :
- src
- alt

bonne journée

a écrit :
<img> a 2 attributs obligatoires

a écrit :

Un exemple : Image gallery.
Le même code localisé : CodePen.

... C'est du javascript, la question porte sur du css, mais c'est joli.

Pas sûr que ça réponde à la question initiale.
Modifié par loicbcn (07 Dec 2022 - 15:46)

Ce n'est pas possible de le faire uniquement en JavaScript, à moins que l'on accepte le compromis d'une distribution verticale des items : Responsive "pseudo" Masonry with CSS columns.