Div qui s'adapte à une image

Bonjour,

Je souhaite créer une classe de div qui me permette d'avoir une image avec en dessous un texte qui ne sera pas plus large que l'image (si c'est le cas, il faut que le texte aille à la ligne dès qu'il atteint la taille de l'image).

Pour l'instant j'ai ceci. Il me manque juste ce qui limitera la largeur du div a la taille de mon image. :
div.imgg {
float: left;
margin:10px;
}

Merci

Bonjour,

Le seul moyen d'obtenir ce type de rendu est d'utiliser un élément en display: table-cell et de lui donner une largeur faible, par exemple 100px. Si l'image fait moins de 100px, tu auras un élément de 100px de large (sauf si tu as un mot assez long, de plus de 100px de large, dans ton contenu). Si l'image est plus importante, le bloc s'adaptera à la largeur de cet élément incompressible.

Si la compatibilité avec IE6-7 (qui n'implémentent pas display: table-cell, à la différence du futur IE8) est importante, on utilisera un tableau à une cellule:

<table class="illustration illustration-compact"><tr><td>
	<img src="..." alt="" />
	<span class="legende">Bla bla</span>
</td></tr></table>

(Le premier qui dit que les tableaux saimal a gagné le droit de relire cet article: Maléfiques tableaux !)
Modifié par Florent V. (08 Nov 2008 - 23:24)

Ok merci, je vais partir sur le tableau.
Par contre si je comprends bien ton code, on met l'image et le texte dans la meme case.
Je viens d'essayer et le texte se retrouve a coté de l'image et non dessous.
Je peux mettre un br après chaque image, a moins qu'il y ai un autre moyen ?

Et puis le texte dépasse toujours la largeur de l'image.
Modifié par contremaitre (08 Nov 2008 - 23:47)

contremaitre a écrit :
Je peux mettre un br après chaque image, a moins qu'il y ai un autre moyen ?

Passer le SPAN en display: block, par exemple.
Mais si le texte se retrouve à côté de l'image, c'est que tu as dû oublier de mettre une largeur faible à ton tableau. Sinon le texte serait passé à la ligne tout seul.

Ha j'avais pas compris que meme dans le cas du tableau il fallait mettre une largeur faible. Merci, ça marche bien maintenant

contremaitre a écrit :
Ha j'avais pas compris que meme dans le cas du tableau il fallait mettre une largeur faible.

Le display: inline-block signifie «comporte toi comme une cellule de tableau». Ça remplace avantageusement l'utilisation d'un tableau de mise en page... pour les navigateurs compatibles. À une ou deux subtilités près, on utilisera les mêmes propriétés de mise en forme pour un tableau de mise en forme simple et pour un bloc avec le type de rendu équivalent.

(En y repensant, il est peut-être préférable d'utiliser display:table plutôt que display:table-cell, si on choisit cette voie. Ça serait à tester.)

Edit: hop, pas encore testé dans IE mais il ne devrait pas y avoir de surprise:
http://web.covertprestige.info/test/48-legende-largeur-image.html
Modifié par Florent V. (09 Nov 2008 - 03:08)