Bild leider nicht responive

[Rolf B]

Hallo Tommy,

was willst Du denn haben?

Wenn Du im Grid die Spaltenbreite für das Bild auf auto setzt und dem Bild width:100% gibst, dann kann der Browser ja nur die intrinsische^[1] Bildgröße als Maßstab nehmen.

Da die font-size die Schrifthöhe bestimmt, wäre es demnach sinnvoll, dem Bild eine Höhe vorzugeben. Der Browser berechnet dazu an Hand der intrinsischen Maße des Bildes die Breite.

Am elegantesten fände ich, die font-size im <header> festzulegen und an das <h1> zu vererben. Dann schreibst Du an das Bild einfach nur eine Höhe von beispielsweise 1.5em und das Bild orientiert sich automatisch an der Schriftgröße im Header. Der Abstand zwischen Bild und Text ebenso.

Guckst Du: https://jsfiddle.net/Rolf_b/48bf1npo

Rolf

---

1. Das, was in der Bilddatei an Breite und Höhe gespeichert ist. ↩︎