5546 sujets

Sémantique web et HTML

Bonjour, j'essaye d'installer une galerie sur mon site et je rencontre un problème :

J'essaie de créer plusieurs sections avec la classe "galerie", qui devrait contenir une à six images chacune. Les sections ont une largeur et une hauteur fixes. Je veux que les images à l'intérieur ajustent leur taille pour remplir uniformément la largeur et la hauteur de la "galerie".

J'utilise une boîte flexible pour gérer les images, mais les éléments s'adaptent toujours automatiquement à la taille maximale, à moins que j'utilise la condition de largeur maximale que je ne veux pas, car j'ai également des boîtes qui ne contiennent qu'une seule image et celles-ci devraient avoir aucune limitation afin qu'ils puissent remplir tout l'élément de la galerie.

Étant donné que les objets s'agrandissent automatiquement, s'il y a plus d'une image, le contenu total des galeries finit par être beaucoup plus grand que les conteneurs, débordant les bordures en haut et en bas (j'ai utilisé align-content et justifier-content tous deux définis au centre).

J'ai lié le réglage du débordement sur masqué, mais cela n'empêche évidemment pas les éléments d'être surdimensionnés. J'ai également essayé d'ajuster la largeur et la hauteur maximales des éléments, mais comme les éléments individuels devraient toujours pouvoir remplir tout le parent, ce n'est pas vraiment une option non plus. Flex-grow et Flex-shrink pour les éléments n'aident pas non plus car cela change simplement leur comportement envers les autres éléments.

Existe-t-il un moyen d'empêcher les éléments de ma galerie de dépasser les limites des éléments parents ?
Ou flexbox est-il généralement la mauvaise approche dans cette situation ?
Merci beaucoup !
Modifié par gcyrillus (11 Oct 2021 - 20:40)