Bildunterschrift an Bild anpassen mit min-content (inklusive IE)

Häufig möchte man, dass die Beschriftung zu einem Bild genauso breit wird wie das Bild selbst – und das soll möglichst natürlich auch dann funktionieren, wenn wir die Breite des Bildes nicht im Voraus wissen. Möglich wird das über den CSS3-Wert min-content. Und für den IE klappts über ein bisschen Trickserei mit Gridlayout.

Aber von Anfang an. Nehmen wir an, wir haben ein Bild mit einer Beschriftung.

Bild mit Bildbeschriftung

Wir wollen jetzt, dass die Beschriftung genauso breit wird wie das Bild.

Bildbeschriftung an Bild angepasst

Wie kann man das erreichen? Eine Möglichkeit besteht darin, dem umfassenden Element die gewünschte Breite zu geben, allerdings ist das etwas unflexibel, falls wir Bilder in unterschiedlichen Breiten haben. Die schönere Lösung besteht in der Angabe min-content bei der CSS-width-Eigenschaft. Dieser neue CSS-Wert ist bei css-sizing definiert.

In der derzeitigen Browsersituation muss man min-content mit den Präfixen für Firefox und Blink/Webkit doppeln.

width: -webkit-min-content;
width: -moz-min-content;
width: min-content;

Die bange Frage, die sich stellt, ist dann natürlich: Und wie ist es mit dem Internet Explorer? Schlechte Nachrichten, im IE ist min-content so  nicht implementiert. Die gute Nachricht: Allerdings gibt es die Angabe min-content, wenn man auf das Gridlayout umschaltet, was im Internet Explorer ab Version 10 funktioniert.

Browserübergreifend Bildbeschriftung anpassen

Eine browserübergreifende Lösung sieht folgendermaßen aus. Zuerst der HTML-Code – das zusätzliche .container-Element brauchen wir für die Fallback-Lösung für den IE:

<div class="container">
<figure>
<img src="farn.jpg" alt="Farn">
<figcaption>Farn ist eine der ältesten Pflanzen ...</figcaption>
</figure>
</div>

Dann kommen die Formatierungen für Chrome/Opera/Safari/Mozilla:

figure {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}

Und schließlich die Sonderangaben für den IE10+:

.container {
display: -ms-grid;
-ms-grid-columns: min-content;
}

Et voilà, jetzt klappt’s auch mit dem Internet Explorer 10+.

Beispiel bei jsFiddle austesten

 

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>