Ich habe zwei Tage damit verbracht, ein Fig / Figkation-Problem zu lösen, ohne Erfolg.
Ich habe eine Django-Anwendung, mit der Benutzer Bilder übermitteln können, und ich verwende die figcaption- und figcaption-Tags, um das Bild mit einer zugehörigen Bildunterschrift anzuzeigen. Das Hauptproblem ist, dass die Beschriftungsbreite die Bildbreite überschreitet.
Ich versuche, einen Weg zu finden, wie das Bild die gleiche Größe behält und die Bildunterschrift entsprechend breit wird. Ich benutze auch Twitter-Bootstrap. Ich bin offen für alle Lösungen. Jede Eingabe, Erfahrung oder Rat sehr geschätzt.
AKTUALISIERT: Dies ist der eigentliche HTML-Vorlagencode und CSS:
%Vor% Der Schlüssel ist, eine Art von max-width für img auf dem Element figure zu setzen, wenn du kannst, dann behält es sowohl den Text als auch den Text bei.
Sehen Sie eine Beispielgeige .
Erstens sollte diese <figure width="{{story.pic.width_field}}"> diese <figure style="width: {{story.pic.width_field}};"> sein.
Zweitens, tue nur diese CSS (nichts anderes benötigt für img oder figcaption ; siehe Geige ):
Wirklich kleine Bilder mit langem Text werden immer noch Probleme haben, wie diese Geige zeigt . Um es zumindest sauber aussehen zu lassen, könnten Sie nach einer Mindestgröße von img suchen und wenn diese zu klein ist (zB 100px ), anstatt width auf figure set min-width auf zu setzen Setze img ein und setze einen max-width auf deinen Grenzwert von 100px wie diese Geige zeigt .
Die Lösung für dieses Problem besteht darin, mit TABLE und TABLECAPTION zu spielen. Es sind nur zwei Zeilen Code.
Sie können eine Live-Vorschau dieser Lösung auf der Website sehen: Ссылка
%Vor%