Florence Maurice

Webthemen

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

Geschrieben am: , aktualisiert:

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.

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 CSS-Wert ist bei css-sizing definiert.

Wenn Sie noch ältere Browser (Firefox < 66, Chrome < 94) unterstützen wollen, müssen Sie min-content mit den Präfixen für Firefox und Blink/Webkit doppeln.

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

Edge kann das ab Version 94. Falls Sie noch Vorversionen oder den IE ab 10 unterstützen müssen, gibts einen Trick: Die Angabe min-content klappt, wenn man auf das Gridlayout umschaltet, was im Internet Explorer ab Version 10 funktioniert.

Browserübergreifend Bildbeschriftung anpassen

Eine browserübergreifende Lösung inklusive alter IE/Edge 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/Safari/Firefox/Edge ab 94:

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