28172 sujets

CSS et mise en forme, CSS3

[Résolu] Comment régler la largeur?

Bonjour à tous
Cette fois, j'ai un problème de largeur.
J'ai un objet "diapo", défini comme 
<figure class="diapo">
    <img src="mon_image.jpg">
    <figcaption>un texte de longeur quelconque</figcaption>
</figure>

Les contraintes:
1) l'image doit s'adapter à la largeur du viewport
2) l'image ne doit pas dépasser la taille "naturelle" donnée dans le fichier image
3) la largeur de <figure> doit être celle de <img> (plus un léger padding)
4) le texte doit se mouler à la largeur ainsi définie.
Ce que j'obtiens avec mon CSS actuel ne répond pas à ces critères:
http://tests.osirisnet.net/migration/outils/diapo.png
j'ai défini <figure> comme display:inline-table pour qu'il s'adapte à la largeur de l'image, mais le résultat c'est qu'il s'élargit en fonction du texte, je suis obligé de ettre des <br>pour plier le texte...
Bref, il faut refaire le CSS, et je nage...
Pourriez vous me donner des conseils qui m'évitent une fois de plus de traiter le problème en Javascript?
loicbcn a écrit :
Bonjour,
si tu connais la largeur de l'image, tu peux mettre un max-width sur &lt;figure&gt;.
Codepen

"connaitre la largeur de l'image" n'a pas de sens: il y a des centaines d'images de ce genre dans le site, je ne vais pas faire cela "à la main", image par image. Ces <figure> sont générés par un script Javascript à partir du nom de l'image et du texte. Au moment où le script est appelé l'image n'est pas chargée, il faudrait un autre script qu démarrage de la page et au resize/orientationchange pour tout recalculer, c'est ce que je voudrais éviter.
loicbcn a écrit :

Apparemment, il y a aussi un hack(width:1%) avec display:inline-table, trouvé ici: Stack. Avec pour résultat dans ton cas: http://codepen.io/anon/pen/PGgzEg

ça me semble une bonne solution, mais j'aimerais comprendre comment ça marche.
la dernière fois que j'ai utilisé quelque chose sans comprendre, ça s'est terminé en catastrophe...
Modifié par PapyJP (26 Oct 2016 - 13:34)
PapyJP a écrit :
connaitre la largeur de l'image n'a pas de sens
Pour toi, mais je ne sais pas comment est monté l'environnement sur lequel tu travailles ... Il n'est pas rare d'avoir des images en base de données avec leurs dimensions stockées dans des champs.

PapyJP a écrit :
j'aimerais comprendre comment ça marche

Je suppose que 1% est la plus petite dimension dynamique possible, et que comme on se trouve dans un contexte de table, le conteneur s'étire juste ce qu'il faut pour que son contenu soit visible.
Modifié par loicbcn (26 Oct 2016 - 14:09)
loicbcn a écrit :
Je suppose que 1% est la plus petite dimension dynamique possible, et que comme on se trouve dans un contexte de table, le conteneur s'étire juste ce qu'il faut pour que son contenu soit visible.

ce doit être ça.
Moyennant quoi dans mon premier essai l'image se rétracte et devient toute petite, je suppose que c'est la largeur minimum du texte qui définit la largeur du cadre.
Je devrais pouvoir arranger ça, je dois avoir quelque part un CSS qui ajuste l'image au cadre
Tu auras sans doute un max-width:100% sur ton image quelque part.


De rien, content que ça fonctionne.
Modifié par loicbcn (26 Oct 2016 - 14:29)
Sujet clos
Aller à