[Résolu] Flexbox avec images

Bonjour à tous,

j’ai une série d’images (le nombre d’images est variable) qui ont toutes les mêmes dimensions.

<div class="ligneDImages">
    <img>
    <img>
</div>

J’aimerais pouvoir les afficher sur une seule ligne et qu’elles occupent la largeur de toute la fenêtre en conservant leur ratio largeur/hauteur (donc pas de déformations, une image qui représente un carré ne s’affichera pas sous forme de rectangle).
Il y a la solution javascript en fixant la largeur des images à (100 / nb_images)+"%"; et en l’appelant au window.onload et window.resize.
Y a-t-il une solution 100% css ?
J’ai essayé avec flexbox et même en y rajoutant object-fit, je sèche.
La seule solution css que j’ai trouvé a été de rajouter un second niveau de div :
https://jsfiddle.net/efmkq2pd/1/
Y a-t-il plus simple?
Niveau compatibilité si cela tourne sur une version récente de firefox cela sera déjà pas mal.

Merci beaucoup.
Modifié par adrien881 (06 Jul 2016 - 22:46)

Bonjour !

Si j'ai bien compris votre question, vous trouverez votre bonheur ici :
https://blog.goetter.fr/2015/10/30/flexbox-a-casse-mes-images-responsive/

Hello,

Zelena a écrit :
Si j'ai bien compris votre question, vous trouverez votre bonheur ici

En fait, pas cette fois

Le "problème" est bien plus simple : tu as choisi un conteneur en display: flex; donc son axe principal est celui par défaut : row.
Du coup, la propriété align-items, qui gère l'axe vertical et qui vaut "stretch" par défaut, va forcément étirer tes images en hauteur.

La correction est simple :

div {
  display: flex;
  align-items: flex-start;
}

Modifié par Raphael (07 Jul 2016 - 09:19)

Exact.

Les images occupent toute la largeur de la fenêtre, mais gardent leurs proportions. Tout sauf 'stretch'.

Que j’ai du mal avec les flexbox.
Je n’y arrive toujours pas.

J’essaye d’utiliser flex-start sur le conteneur comme vous me l’avez proposé, mais les images sont déformées.

Il y a effectivement plus d'écueils que prévus, notamment parce que :
- il s'agit d'images (ce sont des éléments fourbes possédant des dimensions intrinsèques)
- on ne connaît pas le nombre par ligne

La combinaison des deux contraintes rend les choses difficiles. J'ai obtenu un résultat moyennement utilisable ici : http://codepen.io/raphaelgoetter/pen/rLzzqg?editors=1100

Mais comme tu le dis, je pense que la meilleure solution (en attendant Grid Layout), sera d'insérer chaque image dans un conteneur intermédiaire.

Sinon, si le nombre d'images max est fini, il reste les vieilles techniques sans flex:

http://codepen.io/anon/pen/EyvwbW

http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/

Merci à tous pour vos réponses,

Raphaël ta solution me convient. Pourquoi dis-tu que le résultat est « moyennement utilisable » ? Est-ce uniquement un problème de compatibilité ou autre chose ?

Le flex-box reste encore bien mystérieux pour moi.

Kustolovic, merci pour l’astuce css :
img:first-child:nth-last-child(3),
img:first-child:nth-last-child(3) ~ img {

que je trouve (un peu déroutant quand on la voit pour la première fois, mais) bien pratique. À retenir.

Merci, cordialement.