Ajuster la largeur de <figcaption> à la largeur de l'image

Bonjour,

Je rencontre un problème avec l'utilisation des balises <figcaption> et <figure>.

Je souhaite que la largeur de <figcaption> soit ajustée à la largeur de l'image, et non pas à la largeur de <figure> comme elle l'est par défaut. Seule style appliqué :

figcaption { text-align: left; }

Lorsque l'image remplit la largeur de <figure> (occupant toute la largeur de son parent), pas de problème : la légende est bien alignée à gauche par rapport à <figure>, et donc bien alignée sous l'image.
Mais lorsque l'image n'occupe pas toute la largeur de <figure> (typiquement si la hauteur de l'image est supérieure à sa largeur), alors dans ce cas la légende est toujours alignée à gauche par rapport à <figure>, et donc n'est pas aligné sous l'image.

Pour bien faire, il faudrait que la largeur de <figure> s'adapte en fonction de la largeur de l'image. J'ai retourné le problème dans tous les sens mais rien ne semble fonctionner.

Merci par avance pour vos indications/solutions

Louis.
Modifié par Boudha (06 Feb 2012 - 11:26)

Bonjour,

Il me semble que ce tutoriel répond très exactement à ta demande:
Adapter une légende à la largeur de l'image.

Il est un poil vieux mais:
- La technique à base de display:table reste correcte à ma connaissance.
- Le support d'IE6 c'est fini, et celui d'IE7 n'est pas critique, donc pas besoin d'utiliser un tableau de mise en page comme suggéré en solution de secours.
- Le tutoriel utilise des éléments DIV et P, mais ça s'adapte sans souci avec FIGURE et FIGCAPTION.

Merci pour ta réponse, mais malheureusement ça ne fonctionne pas (comme je le voudrais ). Je vais préciser un peu plus.

Voici mon code HTML :

<div id="main">
<figure>
<img src="image.jpg" alt="Description image" >
<figcaption>Une image</figcaption>
</figure>
</div>

Et voila mon code CSS dans le cas où la hauteur de l'image est supérieure à sa largeur :

#main { width: 30%; }

figure {
	height: 50%; /* Je préfère fixer la hauteur de <figure> qui dépendra de la hauteur de la page */
	width: auto;
	display: table;
}

figure img {
	height: 100%; /* Pour que l'image remplisse, en hauteur, <figure> */
	max-width: 100%; /* Evite que l'image sorte de #main */
}

figcaption { text-align: left; }

Le seul problème est quand je rétrécie la hauteur (sans toucher à la largeur) de la fenêtre de mon navigateur. La largeur de <figure> ne s'ajuste pas, du coup <figcpation> n'est plus aligné avec l'image.

Petite image du résultat :

Modifié par Boudha (06 Feb 2012 - 17:58)

Tu n'as pas appliqué la technique donnée dans l'article (qui nécessite de fixer une largeur faible pour l'élément FIGURE, par exemple à 200px, en partant du principe que l'image contenue élargira cet élément puisqu'il est en display:table). C'est normal?

À vrai dire je ne sais pas comment cette technique se comporte quand par ailleurs on a fixé la hauteur de FIGURE en fonction de la hauteur de son parent. Je dirai juste que les hauteurs fixes, en règle générale c'est un truc à éviter en webdesign, mais ça va dépendre de ton contenu et de ton design.