Démonstration du comportement de la galerie d'images lorsque plusieurs formats sont impliqués. Dans l'ordre :
- 400 x 400
- 1920 x 1080
- 1080 x 1920
- 800 x 600
- 1000 x 200
- 200 x 1000
La hauteur de la galerie est calculée pour être relative à la moyenne des proportions de chaque image. Ce faisant, afficher un ensemble d'images paysages sera plus petit qu'un ensemble d'images portraits.
Le problème actuellement, c'est que je charge les images en javascript pour extraire leurs dimensions avant de calculer la hauteur CSS. Du coup il y a un léger layout shift avant que les images apparaissent.
Pour résoudre ce problème, j'aurais dû traiter les images à la création du twoot pour connaitre à l'avance les dimensions que j'aurais alors stocké en base de données.