Le centrage et l'alignement de la largeur de figcaption balise de l'image dans la figure de la balise
J'ai passé deux jours à tenter de résoudre une fig/figcation problème en vain.
J'ai une application Django où les utilisateurs sont en mesure de soumettre des images et je suis à l'aide de la figure et figcaption tags à afficher l'image, accompagnée d'une légende. Le principal problème est que la légende de la largeur dépasse la largeur de l'image.
J'essaie de trouver un moyen pour que l'image reste la même taille et la légende de la ligne dans la largeur en conséquence. Je suis en utilisant Twitter Bootstrap. Je suis ouvert à toutes les solutions. De l'entrée, de l'expérience ou des conseils très apprécié.
Mise à JOUR: il s'agit du modèle HTML code et CSS:
<div class="span4 offset2">
{% if story.pic %}
<h2>Image</h2>
<figure width="{{story.pic.width_field}}">
<img class="image"src="{{ story.pic.url }}" width="{{story.pic.width_field}}" alt="some_image_alt_text"/>
{% if story.caption %}
<figcaption>
{{story.caption}}
</figcaption>
{% endif %}
</figure>
{% endif %}
</div>
image {height:auto;}
figure {margin:0; display:table;}
figcaption {display:table-row;
max-width: 30%;
font-weight: bold;}
img
à un pourcentage width
? Ou êtes-vous laisser sans width
? Je devine que vous avez le img
ensemble de width: 100%
.
OriginalL'auteur Why Not | 2012-07-12
Vous devez vous connecter pour publier un commentaire.
Solution Originale
La clé est de mettre en place une sorte de
max-width
pour laimg
sur lefigure
élément si vous le pouvez, puis il se garder à la fois et le texte contraint.Voir un exemple de violon.
Si Vous êtes à la Lecture par programme la Largeur
Tout d'abord, ce
<figure width="{{story.pic.width_field}}">
doit être ce<figure style="width: {{story.pic.width_field}};">
.Deuxième, ne seulement cette css (besoin de rien d'autre pour
img
oufigcaption
; voir tripoter):Vraiment des petites images avec texte long, vont toujours avoir des problèmes, comme ce violon montre. Pour le rendre au moins une apparence propre, vous devriez vérifier pour certains d'une taille minimale de la
img
et si elle est trop petite (disons,100px
), puis au lieu de mettrewidth
sur lefigure
ensemblemin-width
à laimg
de la taille et d'unmax-width
à votre seuil de100px
comme ce violon montre.Aussi, la figure. image à 100 pour cent empêche de nouvelles images téléchargées à partir de leur apparition. C'est tellement étrange. Retirer les affiche à nouveau.
n'avez pas à utiliser un pourcentage
max-width
. Vous pouvez définir un montant en pixels. Pas sûr de votre situation, mais dans l'idéal, si vous pourriez problématique obtenir la largeur de l'image ensuite, vous pouvez définir directement unwidth
sur lefigure
en ligne avec lestyle
attribut, et la chute de la100%
la largeur de l'image et de lamax-width
de la css. Unwidth
ou unmax-width
sur lefigure
accomplit en gardant lefigcaption
de la même taille ou plus petit que l'img
, qui est ce que vous désirez.J'ai mis à jour le code ci-dessus avec vos suggestions. La légende n'est pas toujours enrouler autour des images plus petites que la largeur de la div correctement. Tellement frustrant. Été d'environ 9 heures maintenant.
pas sûr de ce que vous voulez dire que "les images plus petites que la largeur de la div" ne devrait pas se produire parce que vous êtes le réglage de la largeur sur les deux à la même chose. Toutefois, il pourrait être le
display: table
vous êtes paramètre, qui n'est plus nécessaire avec cette méthode. Voir ma mise à jour de ma réponse.OriginalL'auteur ScottS
La solution de ce problème consiste à jouer avec une TABLE et des TABLECAPTION.
C'est juste 2 lignes de code.
Vous pouvez voir un aperçu en direct de cette solution sur le site web:
http://www.sandrasen.de/projektgebiete/kienheide/
OriginalL'auteur alboth - undkonsorten.com
En HTML5, les choses sont assez simples:
HTML
CSS
OriginalL'auteur lifebalance