Zentrieren und ausrichten der Breite des figcaption-tag auf einem Bild in Bild-tag

Hab ich verbrachte zwei Tage versucht nun zu lösen a Abb/figcation Problem ohne Erfolg.

Habe ich eine Django-Anwendung, wo Benutzer sind in der Lage, Bilder Einreichen und ich bin mit der Abbildung und figcaption-tags um das Bild anzuzeigen, mit der dazugehörigen Bildunterschrift. Das Hauptproblem ist, dass die caption-Breite überschreitet die Bild-Breite.

Ich versuche, herauszufinden, einen Weg für die Bild zu bleiben, die gleiche Größe und die Bildunterschrift, um eine Linie in der Breite entsprechend. Ich bin mit Twitter-Bootstrap auch. Ich bin offen für alle Lösungen. Jede Eingabe, Erfahrung oder Rat sehr dankbar.

AKTUALISIERT: Dies ist die eigentliche HTML-template-code und 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;}

Sind Sie auf der Einstellung der img einem Prozentsatz width? Oder verlassen Sie es, ohne width Einstellung? Ich vermute, Sie haben die img eingestellt width: 100%.

InformationsquelleAutor Why Not | 2012-07-12

9

Ursprünglichen Lösung
```
figure .image {
    width: 100%;
}

figure {
    text-align: center;
    display: table;
    max-width: 30%; /* demo; set some amount (px or %) if you can */
    margin: 10px auto; /* not needed unless you want centered */
}
```
Der Schlüssel ist, um irgendeine Art von max-width für die img auf die figure element, wenn Sie können, dann wird es halten Sie beide und der text eingeschränkt.

Sehen Sie ein Beispiel, fiddle.

Wenn Sie Programmgesteuert Lesen die Breite

Erste, das <figure width="{{story.pic.width_field}}"> sollte diese <figure style="width: {{story.pic.width_field}};">.

Zweite, tun nur dieser css (nichts anderes benötigt für img oder figcaption; siehe Geige):
```
figure {
    text-align: center;
    margin: 10px auto; /* not needed unless you want centered */
}
```
Wirklich kleine Bilder mit dem langen text immer noch Probleme haben, als diese Geige zeigt. Um es zumindest sauber Aussehen, die Sie überprüfen könnte für einige minimale Größe der img und wenn es zu klein ist (sagen wir 100px), dann statt der Einstellung width auf die figure set min-width zu den img Größe und legen Sie eine max-width auf Ihrer Schwelle 100px wie diese Geige zeigt.
- Okay. Ich fügte hinzu, Ihre Einstellungen mit einer max-Breite von 50%, nur um zu sehen. Die Bilder die Größe, um die Breite des div, die ein bisschen arbeiten. Der text wird schließlich wickeln. Aber kleinere Bilder erweitern, auch außerhalb Ihrer ursprünglichen Größe (das hat zu tun mit der Figur .Bild CSS, denke ich. Jeder Weg, um die tatsächlichen Proportionen in Einklang? Ich bin mir nicht sicher, was genau die prozentuale Differenz der max-Breite erreicht. Gute Antwort, ansonsten.
- Auch die Figur. Bild bei 100 Prozent verhindert, dass neu hochgeladene Bilder nicht angezeigt. So seltsam. Entfernen Sie zeigt diesen wieder.
- nicht einen Prozentsatz max-width. Sie könnte einen pixel Höhe. Nicht sicher von Ihrer situation, aber im Idealfall, wenn Sie könnte problematisch Holen Sie die Breite des Bildes dann könnte man direkt eine width auf die figure inline mit der style Attribut, und legen Sie die 100% Bildbreite und die max-width von der css. Ein width oder eine max-width auf die figure leistet, halten die figcaption die gleiche Größe oder kleiner als der img, das ist, was Sie sich wünschen.
- Ich aktualisierte den code über Ihre Anregungen mit. Die Beschriftung immer noch nicht wrap-around-Bilder, die kleiner als die Breite des div-richtig. So frustrierend. Seit über 9 Stunden nun.
- nicht sicher, was du meinst, dass "Bilder, die kleiner als die Breite des div" sollte nicht auftreten, weil Sie die Einstellung der Breite auf beiden die gleichen. Es könnte aber auch sein das display: table Sie sind Einstellung, die nicht mehr benötigt werden, mit dieser Methode. Siehe mein update zu meiner Antwort.
InformationsquelleAutor ScottS
4

Die Lösung für dieses problem, ist das Spiel mit TISCH und TABLECAPTION.
Es ist nur 2 Zeilen code.

Sehen Sie eine live-Vorschau der Lösung auf der website:
http://www.sandrasen.de/projektgebiete/kienheide/
```
figure { 
  display: table; 
}

figcaption { 
  display: table-caption; /* aligns size to the table of the figure
  caption-side: bottom /* makes the caption appear underneath the image/figure */
}
```
InformationsquelleAutor alboth - undkonsorten.com

In HTML5 ist es ganz einfach:

HTML

<figure>
    <img src="..." >
    <figcaption>Caption 1</figcaption>
</figure>
<figure>
    <img src="..." >
    <figcaption>Caption 2</figcaption>
</figure>

CSS

figure{
  display: inline-block;
}

/* optional, use as required */
figcaption { 
  max-width: 30%;
  caption-side: bottom;
}

InformationsquelleAutor lifebalance

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Ursprünglichen Lösung

Wenn Sie Programmgesteuert Lesen die Breite