[Résolu] Hauteurs (in)égales

Bonjour à tous

Dans la page https://tests.osirisnet.net/docu/bruxelles_art_du_contour/test-bruxelles_art_du_contour_03.htm

Les images dans le premier cadre ont une hauteur inégale.
Le contenu de ce cadre est généré par JS, les images sont toutes redimensionnées pour avoir la même hauteur.
Apparemment, cela est lié à ce que les groupes d'images sont stylés comme des <ul> display:flex;flex-wrap:wrap; et chaque <figure> contenant l'image et le texte est insérée dans un <li> pour que l'on ait un espacement entre les lignes.

Précédemment les groupes d'images étaient des <div> display:flex;flex-wrap:wrap; contenant directement les <figure>. Il n'y avait pas ce problème de taille d'image, mais les lignes étaient "collées", d'où l'ajout d'une balise <li> intermédiaire.

Il s'agit donc vraisemblablement d'un problème de CSS, mais dans ce contexte complexe je ne parviens pas à voir où.

A noter que dans le deuxième cadre, où les images n'ont pas de texte attaché les images ont bien la même hauteur.

Merci pour votre aide dans le traitement de ce problème.

Salut,

Je passe en coup de vent. J'avoue avoir lu le sujet en Z. Je peux m'être trompé dans ma réponse :

.cluster .group .diapo > img{
height: 100%;
object-fit: cover;
width: auto; /* j'ai regardé vite fait et ne suis pas sûr que cette règle soit justifiée (héritage). */
}

Merci de ta réponse
je comprends que width:auto préserve la hauteur des images, c'est ce qui me convient.
Je ne comprends pas height:100% : si c'est 100% de la hauteur de la diapo, comment se place le texte au dessous ?

Par contre ce CSS apporte des effets de bord indésirable dans d'autres cas, mais je dois pouvoir distinguer les cas en mettant des classes appropriées.

Bonjour,

En regardant aussi rapidement, je vois les li en inline-block, il serait peut-être judicieux de les passer en inline-flex.

PapyJP a écrit :

Je ne comprends pas height:100% : si c'est 100% de la hauteur de la diapo, comment se place le texte au dessous ?

Le height:100% reviendrait a donner toute la hauteur du parent (mais figure en flex) alors flex-shrink reprend la main (par défaut) et réduit cette hauteur. pour laisser la place au texte.


Je dirais de retirer le width:auto (parceque object-fit) et de laisser le width:100%herité actif (évite possible débordement du coup) , et enfin de mettre un flex:1 0 auto; à la place ... de height.

en résumé:
1) passer ligne 190 de inline-block à inline-flex (dans common.css)
2) remplacer ligne 163 de common.css

.cluster .group.long .diapo > img {
    height: 100%; 
    object-fit: cover;
    width: auto;
}

par

.cluster .group.long .diapo > img {
    object-fit: cover;
    flex: 1 0 auto;
}

Cela semble plus cohérent et opérationnel dans Chrome et Firefox avec les outils de dévelloppement.

Reste plus qu'a tester (attention au CSS en cache )

Cdt
Modifié par gcyrillus (21 Oct 2022 - 17:08)

PapyJP a écrit :

je comprends que width:auto préserve la hauteur des images, c'est ce qui me convient.

ça ne préserve pas la hauteur, ça préserve l'homothétie.

PapyJP a écrit :

Je ne comprends pas height:100% : si c'est 100% de la hauteur de la diapo, comment se place le texte au dessous ?

object-fit
Modifié par niuxe (21 Oct 2022 - 17:03)

gcyrillus a écrit :


1) passer ligne 190 de inline-block à inline-flex (dans common.css)
2) remplacer ligne 163 de common.css

.cluster .group.long .diapo > img {
    height: 100%; 
    object-fit: cover;
    width: auto;
}

par

.cluster .group.long .diapo > img {
    object-fit: cover;
    flex: 1 0 auto;
}

oui mais, non. Plus bas dans la page, tu retrouves un affichage en escalier avec même, un bug graphique (texte en escalier pour une card). Je pense que tu ne peux pas éviter le débordement (puisque les images n'ont pas le même ratio).

* Comme je l'ai indiqué, width: auto n'est peut être pas du tout pertinent.

Merci de vos réponses, je vais méditer ça pour essayer de comprendre en détail.

niuxe a écrit :


oui mais, non. Plus bas dans la page, tu retrouves un affichage en escalier avec même, un bug graphique (texte en escalier pour une card). Je pense que tu ne peux pas éviter le débordement (puisque les images n'ont pas le même ratio).

* Comme je l'ai indiqué, width: auto n'est peut être pas du tout pertinent.

Heu, j'indique aussi de le retirer.

Pour l'escalier plus bas , (si modif faîtes) c'est surement là ou le texte passe sur deux lignes. (un max-height: 1.2em; sur le figcaption laisserait déborder une deuxième ligne dans l'espace entre les lignes de figures , mais bon, la c'est du bricolage et puis badaboum pour une troisième ligne de texte et la dernière ligne de figures).
Modifié par gcyrillus (21 Oct 2022 - 17:31)

J'ai appliqué les modifications que vous m'avez indiquées.
https://tests.osirisnet.net/docu/bruxelles_art_du_contour/test-bruxelles_art_du_contour_03.htm
Cela ne correspond pas exactement à ce que je voudrais.
Je voudrais que les images, qui ont toutes la même hauteur s'affichent avec la même hauteur et que les textes se mettent au dessous, qu'ils tiennent sur une ou plusieurs lignes, ce qui veut dire forcer toutes les <figure> à prendre la même hauteur.
Je n'ai pas de difficulté à faire ça si je ne mets pas les <li>, car les <figure> sont directement des enfants de <div class="group"> mais dans le cas de nombreuses images les lignes d'images sont collées les unes aux autres. Les <li> ne sont là que pour ajouter un intervalle.

Je sais bien que depuis plusieurs années on nous promet des gouttières, mais le temps que ce soit généralisé je serais sans doute hors circuit compte tenu de mon âge avancé

J'en viens à regretter les <tr>...

PapyJP a écrit :

Je voudrais que les images, qui ont toutes la même hauteur s'affichent avec la même hauteur et que les textes se mettent au dessous, qu'ils tiennent sur une ou plusieurs lignes, ce qui veut dire forcer toutes les &lt;figure&gt; à prendre la même hauteur.

gcyrillus a écrit :

(un max-height: 1.2em; sur le figcaption laisserait déborder une deuxième ligne dans l'espace entre les lignes de figures , mais bon, la c'est du bricolage et puis badaboum pour une troisième ligne de texte et la dernière ligne de figures).

Un height/min-height:2em sur figcaption ou + , serait plus judicieux en fait, si cela correspond à tes attentes. Enfin, si l'idée c'est toutes de la même hauteurs d'une ligne à l'autre, flex ne sait pas faire, chaque lignes est indépendantes et coté grid c'est pas pour tout de suite si jamais ça arrive (un mode ligne masonry avec contre intuitivement un grid-template-columns: masonry; / ordre de remplissage, visuel en ligne de même hauteurs).

Cdt
Modifié par gcyrillus (21 Oct 2022 - 19:27)

Quand j’ai récupéré ce site, il y a environ 5 ans c’était fait avec des <table> et ce n’était bien entendu pas responsive.
La version actuellement en ligne est à base de traitement JavaScript à chaque changement de taille. Ça recalcule toutes les taille et ça les met en dur sous forme de style="height: …px"
Je me suis dit qu’on pourrait éviter les recalculs (c’est à dire les faire faire par CSS et non js) mais je n’imaginais pas que ce serait si compliqué à faire.
Je suis très surpris qu’une chose qui a l’air si simple ne soit pas faisable, ou faisable si difficilement.
Je vais continuer à chercher une solution CSS, je n’aime pas abandonner la partie, mais il serait sans doute plus simple de rester à la solution actuelle.
Modifié par PapyJP (21 Oct 2022 - 21:21)

En effet, cela à l'air compliqué de reprendre partiellement au fil du temps.

Je ne sais pas si cela peut t'aider et si cela peut s'approcher de tes attentes , mais voici ta liste avec les idées évoquées ci dessus : https://codepen.io/gc-nomade/pen/ZEogrRB (hauteur de figure calée à 180px arbitrairement )

Pour la version en grid masonry visuellement en ligne, non seulement il n'y a actuellement que Firefox qui serait en mesure de faire l'affichage, mais il faut aussi specifier une hauteur et le centrage(genre txt-align:center) est aussi une option inexistante, donc sans aucun intêret en final (exit le codepen mais un exemple anonyme en fiddle https://jsfiddle.net/71mxv9ou/ ), je n'aurai pas dû l'évoqué.
Au mieux, me semble t-il, une imbrication de flex (ul,li) et grid (li,figure) serait une option.

cdt
Modifié par gcyrillus (21 Oct 2022 - 22:00)

Mon design était trop compliqué
Je suis revenu à <div class="group"> sans <li> et avec un peu de CSS simple je suis arrivé à ce que je voulais voir la page mise à jour https://tests.osirisnet.net/docu/bruxelles_art_du_contour/test-bruxelles_art_du_contour_03.htm

Ce que j'aurais dû comprendre dès le début, c'était que les "groupes longs" (plus de 4 diapos) ont un comportement très différents des "groupes courts".
Pour les "groupes courts", qui ne sont pas wrappés, le problème est de faire varier la largeur des images en fonction de la largeur de la page, alors que pour les "groupes longs" c'est finalement beaucoup plus simple.

Je vous remercie de vos conseils qui m'ont permis de mieux appréhender certaines choses qui me serviront par la suite.