grid mit image

[Rolf B]

Hallo Fred,

Schau mal hier: https://self.borchmann.one/testsvg.html

Oberes h1: Ein svg (handgemacht)

Unteres h1: Skalierung mit normalem Text und CSS.

Die Border nur zur Visualisierung der h1 Grenzen.

h1 {
   text-align: center;
   border: 5px solid red;
}
h1.gw {
   color: white;
   font-size: clamp(1em, 5.2vw, 4em);
   font-family: serif;
}

<h1 class="gw">Gold Wing Freunde Bielefeld e.V.</h1>

Mittels clamp wird sichergestellt, dass die Schriftgröße in sinnvollen Bereichen bleibt (ok, für die Obergrenze könnte man auch 4em statt 60px angeben), und die vw Angabe in der Mitte sorgt dafür, dass die Schriftgröße abhängig von der Bildbreite skaliert. 5.2vw heißt: 5,2% der Bildschirmbreite. Diesen Wert habe ich experimentell ermittelt, so dass der Text nicht umbricht, solange wie die 1em Schriftgröße überschritten wird.

Die Textversion finde ich ohnehin besser, für ein Bild müsstest Du den Inhalt ins alt-Attribut doppeln.

Rolf