[Résolu] Width:min-content

Bonsoir à tous
Dans la page https://tests.osirisnet.net/news/n_02_21.htm?fr dans la 3ème section il y a un cadre qui devrait contenir des images mais ces images ne sont pas visibles.
La raison est manifestement dû à la commande css suivante

.diapo {
	display:inline-table;
	padding:2px;
	width:min-content;
}

Il suffit de supprimer la ligne width:min-content; pour que les images réapparaissent, mais j'en ai besoin dans d'autres contextes.
Je ne comprends pas pourquoi j'obtiens ce résultat.
Pourriez vous m'aider à comprendre?
Merci

Bonjour,

Il est possible que ça soit lié au fait qu'à l'intérieur, l'image a un max-width de 100%.

D'un côté, on essaie de calculer la largeur du parent en fonction du contenu (avec min-content) et de l'autre on essaie de limiter la largeur contenu en fonction de la largeur du parent. Sachant que l'image est ici le seul contenu, ça peut donner un résultat inattendu.

Amicalement,

Résolu, c'est peut être beaucoup dire, je n'ai toujours pas compris ce qui se passe réellement, disons que j'ai trouvé un contournement :
Dans le contexte des ces groupes d'images, il y a un calcul en JavaScript qui les force à avoir la même hauteur (la plus petite hauteur des images de la même ligne) qui se traduit par style="height: ...px "
Dans le contexte de ce calcul, j'ai ajouté au style "min-width:...px" (et non pas width:...px comme dans l'essai précédent).
Ça supprime le symptôme, mais toujours pas compris la maladie.

Le CSS, c'est comme la spéléologie : plus on avance dans la grotte plus on découvre de ramifications et les choses qu'on croyait claires redeviennent obscures ...
Modifié par PapyJP (07 Feb 2022 - 10:03)

Bonjour,

min-width est plus fort que max-width qui est plus fort que width. Tu ne peux donc pas vraiment compter sur width pour rétablir la situation.

D'après https://www.w3.org/TR/css-sizing-3/#min-content, min-content impose pour un parent la largeur minimale que peuvent prendre ses enfants sans avoir d'overflow. Il n'y avait qu'un enfant, une image, et celle-ci pouvait être réduite à une largeur de 0 (sa largeur était encadrée par min-width et max-width à 100% de celle du parent, donc pouvait être 0 et sa width était probablement complètement ignorée). Comme par ailleurs il y avait un padding de 2 fois 2px, min-content a conduit à une taille du parent de 0 + 4px, soit 4px.

max-width limitait la width de l'image à un maximum de 100% du parent.
min-width limitait la width de l'image à un minimum de 100% du parent.

Et désormais, avec ta modification, min-width empêche max-width de descendre en dessous de la valeur en px que tu spécifies.

C'est un peu alambiqué du fait du css choisi, mais pas si mystérieux que ça.

Il aurait fallu un coup de bol algorithmique pour que width prenne le pas sur tout le reste, donne une valeur pour l'image en ignorant provisoirement min-width et max-width, puis que cette width donne la largeur du parent, pour qu'ensuite min-width et max-width prennent la valeur de width. Une fois qu'on l'écrit, on sent bien que les chances étaient faibles pour que ça se passe comme ça.

Amicalement,
Modifié par parsimonhi (07 Feb 2022 - 12:34)

Merci de cette explication. C'est mieux que de ne pas savoir mais ça ne me dit pas quoi faire.

Reste que je n'ai pas trouvé mieux que mon min-width qui évite de revenir à zéro mais qi bien entendu n'est pas responsive, conduisant à des images déformées sur des écrans de téléphone et même sur mon iPad :

Je garde cette rustine pour le moment faute de mieux, mais il va falloir trouver mieux.

Je vais faire un nouveau fil de discussion pour expliquer le contexte et demander votre collaboration.
Il est vraisemblable que tout soit à reprendre à la base, tout en évitant au malheureux propriétaire du site de changer sensiblement le mode de travail que nous avons mis difficilement au point depuis 4 ans.
Modifié par PapyJP (07 Feb 2022 - 13:13)

J'ai fini par trouver ce qui clochait, c'est à dire une directive CSS dans le fichier CSS spécifique des pages de ce type, ce qui explique que le problème ne se produisait pas dans les autres types de pages.

.news figure img {
	max-width:100%;
	border-radius:2.5%;

le ".news" signifie que ça ne s'applique qu'à ce type de pages.
Je ne comprends pas pourquoi ça coinçait, mais en supprimant cette directive, le problème disparait.

Cette fois ça me semble réglé ... jusqu'à la prochaine :
ça vous évitera d'avoir à lire ma prose sur la façon dont sont traités les blocs d'images sur mon site. C'est sans doute à reprendre à zéro mais on verra une autre fois.
Modifié par PapyJP (07 Feb 2022 - 15:53)