Ajustement d'une image dans une <flgure> flex

Bonsoir à tous
voici le ce de mon test

<figure class"mb">
	<img src="https://loremflickr.com/60/80" alt="">
	<figcaption>
		<h2>Titre</h2>
		<p>texte1</p>
		<p>texte2</p>
		<p>texte3</p>
	</figcaption>
</figure>

p {
	margin:0.25em;
 }
figure {
	display:flex;
 }
figcaption {
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
}

Voici le résultat:

La raison pour laquelle on obtient ce résultat est évidente.
Ma question: y a-t-il un moyen pour que l'image prenne la hauteur de <figure> (déterminée par <figcaption>) en gardant les bonnes proportions, c'est à dire dans ce cas en élargissant l'image ?
Merci de vos réponses

Salut,
il me semble que tu n'utilises pas figure comme il faut. Figure "entoure" figcaption, il ne devrait pas, je crois, être un contenant et se voir appliquer flex ou grid. Idem pour figcaption.
Après, je ne sais pas si c'est ça qui va résoudre la réduction de ton image, mais une chose à la fois.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
https://www.alsacreations.com/article/lire/1337-html5-elements-figure-et-figcaption.html
Je verrais :
D'abord un contenant en flex ou grid et :

<figure >
	<img src="https://loremflickr.com/60/80" alt="">
	<figcaption>
		<h2>Titre</h2>
		<p>texte1</p>
		<p>texte2</p>
		<p>texte3</p>
	</figcaption>
</figure>

malheureusement, il semble que ce soit un bug inherent a flex ou grid,, qui calcule la hauteur et largeur des élements avant que ceux-ci soit redimensionner , si tu passes par javascript pour redimensionner la hauteur de ton image et ensuite applique un display:flex (ou grid) au parent, alors la largeur en fonction de la hauteur (le ratio) est pris en compte .

je ne connait pas de moyen de mettre à jour le calcul de la largeur de l'image avant que le flex modele soit appliqué en CSS . JavaScript semble un passage obligé pour accordé ces deux la img/figcaption avant que flex n'y mette son grain de sel .

exemple en appliquant un min-height en fonction de la hauteur de figcaption. : https://codepen.io/gc-nomade/pen/Exjwgop
Modifié par gcyrillus (05 Mar 2020 - 00:12)

Ce n'est pas vraiment un bug, c'est le principe de l'oeuf ou de la poule.

Flex s'adapte selon son contenu, si on souhaite que le contenu s'adapte au conteneur, on entre dans une boucle infinie sans résolution possible.

Il faut à un moment déterminer quelque chose pour pouvoir faire quelque chose.

Bonjour,

va falloir que je me réveille pour comprendre pourquoi img { align-items: flex-start } fonctionne pas

Sinon comme piste j'ai grid sur figure qui fonctionne bien :

figure {
  display:inline-grid;
  grid-template-columns: 1fr 1fr;
}

@felipe, son but est que l'image s'adapte en hauteur au texte à côté tout en gardant sa proportion. Le problème est que c'est une équation à plusieurs solutions.

La seule solution est de choisir un algorithme et de l'implémenter en javascript.

Et pourquoi pas un premier <div> avec une largeur définie et dedans l'image en background avec un petit background-size: cover ?
Cela dépend de la sémantique que l'on veut donner, je suis d'accord mais ça peut faire le café si on s'en fout de l'image…

kustolovic a écrit :
Ce n'est pas vraiment un bug, c'est le principe de l'oeuf ou de la poule.

Flex s'adapte selon son contenu, si on souhaite que le contenu s'adapte au conteneur, on entre dans une boucle infinie sans résolution possible.

Il faut à un moment déterminer quelque chose pour pouvoir faire quelque chose.

en fait, je considère cela comme un bug récurent avec les images , qui au premier abord devrait être régler avec flex-shrink:0; . Si l'on prend un autre élément qu'une image et que l'on redimensionne celui-ci une fois la grille affichée, elle se réadapte et il n'y a pas se soucis, de débordement.

Voilà un test qui montre quelques défaut avec flex +image , que même des tentatives de reflow ne règle pas. https://codepen.io/gc-nomade/pen/QWbqmdP

Chrome et Firefox ne se comportent pas de la même manière, ce qui me fait penser à un bug. (flex-shrink + min-height fonctionnent pour Chrome)
la dernière boite est en display: grid où FF bug aussi

voilou
Modifié par gcyrillus (05 Mar 2020 - 16:30)

Merci de vos réponses
Je me demandais si parmi les différents paramètres flex il y en aurait un qui traiterait ce problème, ce qui aurait constitué une solution simple dans la présentation des fiches des "paires image-texte", voir par exemple la page https://tests.osirisnet.net/centrale.htm

Bien entendu il existe d'autres façons de traiter ce problème, mais on découvre souvent qu'on a fait des choses inutilement compliquées alors qu'il existait une solution simple (ou bien qu'une meilleure solution est apparue entre temps).
Ce que j'ai réussi à faire faute de mieux il doit y avoir 4 ans pour la page citée ci-dessus mériterait d"être amélioré. Le seul intérêt de cette solution, c'est qu'elle marche