Development #81010
Améliorer le rendu des images rectangulaire dans les listes d'image
0%
Description
Suite à #80576, on obtient la capture suivante quand les images rectangles n'ont pas la même hauteur.
Ce serait pas mal que les titres soit alignés horizontalement si possible
Files
| Capture d’écran du 2023-09-08 11-08-22.png (60.5 KB) Capture d’écran du 2023-09-08 11-08-22.png | |||
| liste-images.png (117 KB) liste-images.png | |||
| s1.png (55.4 KB) s1.png | |||
| s2.png (55.7 KB) s2.png |
Related issues
History
Updated by Pierre Cros 3 months ago
- Related to Development #80576: css: afficher correctement des images rectangulaires pour les listes d'images added
Updated by Frédéric Péters 3 months ago
- Subject changed from Améliorere le rendu des images rectangulaire dans les listes d'image to Améliorer le rendu des images rectangulaire dans les listes d'image
Updated by Frédéric Péters 19 days ago
- File liste-images.png liste-images.png added
Serghei, ThomasJ, en partant d'un cas que j'ai en local (via les catégories de signalement de 3M), en y ajoutant une image de dimensions différentes, j'obtiens un bon résultat simplement en faisant ça :
--- a/wcs/qommon/static/css/item-with-image.scss
+++ b/wcs/qommon/static/css/item-with-image.scss
@@ -29,7 +29,7 @@
&--picture {
margin-bottom: 5px;
grid-area: picture;
- width: var(--image-size);
+ height: var(--image-size);
object-fit: contain;
object-position: bottom;
}
Mais je ne connais pas trop le fonctionnement de la disposition grille, je n'arrive pas à imaginer si dans d'autres situations ça donnerait moins bien. Vous avez une idée ?
Updated by Frédéric Péters 19 days ago
- Status changed from Nouveau to Information nécessaire
- Assignee set to Pierre Cros
Et Pierre, tu aurais l'URL d'où vient ta capture d'écran, pour y tester ma proposition ?
Updated by Pierre Cros 19 days ago
Je viens de jouer avec l'historique pour essayer de restaurer ce que j'utilisais le 8/12 mais pas trop de succès encore, j'essaie encore un peu
Updated by Pierre Cros 19 days ago
- Assignee changed from Pierre Cros to Frédéric Péters
Je me trompais de date, voilà :
https://demarches-validation.test.entrouvert.org/ol/pcros/
Updated by Frédéric Péters 19 days ago
- File s1.png s1.png added
- File s2.png s2.png added
- Status changed from Information nécessaire to Nouveau
- Assignee deleted (
Frédéric Péters)
Ok c'est pas top dans le cas où toutes les images sont orientées ainsi, parce que la hauteur allouée amène alors beaucoup d'espace au-dessus, entre le libellé et l'image,
Ça peut s'atténuer un peu en centrant l'image dans l'espace, mais ça reste pas idéal :
(et centrer ainsi donne un moins bon résultat, je trouve, sur mon test local).
Updated by Frédéric Péters 19 days ago
Pour être sûr, par première capture, tu parles de :
- la première capture que j'attache, avec les images des catégories de signalement, (ok mais le code qui assure ça amène les deux captures qui suivent)
- la première capture de mon commentaire, avec tes images, celle pour laquelle j'écris "beaucoup d'espace au-dessus, entre le libellé et l'image",
- la capture de la situation actuelle que tu as posée au début de ce ticket,
?
Updated by Pierre Cros 19 days ago
Frédéric Péters a écrit :
- la première capture de mon commentaire, avec tes images, celle pour laquelle j'écris "beaucoup d'espace au-dessus, entre le libellé et l'image",
Celle-là.