CSS Secrets

7 Struktur & Layout

36 Intrinsische Größenanpassung

Das Problem

Wir alle wissen: Wenn wir einem Element keinen expliziten Wert für height geben, passt sich seine Höhe automatisch an den Inhalt an. Wie können wir ein ähnliches Verhalten für width erreichen? Angenommen, wir haben ein paar HTML5-Abbildungen, die folgendes Markup verwenden:

HTML

<p>Some text [...]</p><figure>    <img src="adamcatlace.jpg" />    <figcaption>        The great Sir Adam Catlace was named after        Countess Ada Lovelace, the first programmer.    </figcaption></figure><p>More text [...].</p>

Wenn wir dieses Beispiel mit ein paar Basisstilen versehen, z.B. einem Rahmen um die Abbildungen, dann sieht das Ergebnis standardmäßig aus wie in Abbildung 7.1. Die Abbildungen ...