„stretching text“: font-size an Container-Breite koppeln

[Linuchs]

Moin,

die Überschrift einer Seite soll die volle Breite des umgebenden div einnehmen. Dieser div hat max-width, damit Fließtext lesbar bleibt.

Für die Viewport-Breite ist vw zuständig, dass funktioniert auch, solange die div-Breite so groß ist wie 100vw. Wird sie kleiner bei breiten Bildschirmen, wächst font-size und ergibt schließlich einen Zeilenumbruch. Der ist zu vermeiden.

h1.name {
  margin-left: -10%;
  width:  120%;
  padding-left: 32%;
  font-family: sans-serif;
  font-style: normal;
  font-size: 200%;    /* ist starr */
  font-size: 3.2vw;   /* viewport width, aber nicht div.width */
  margin-bottom: -1.2em;
  border: .1pt dotted #ccc;
}

<div style="overflow: hidden;">
  <h1 class=name>Internationale Musikinitiative</h1>
  <img src="../berkach_musik/img/logo_musikinitiative_berkach.png" alt="Logo" style="margin-left:-10%;width:120%" />
</div>

Wie kann ich font-size vom umgebenden div abhängig machen?

Der Versuch font-size: 200%; bezieht sich wohl auf em des Dokuments und ändert sich nicht.

Gruß, Linuchs

[Gunnar Bittersmann]

@@Linuchs

die Überschrift einer Seite soll die volle Breite des umgebenden div einnehmen.

☞ Mit JavaScript.

Ohne JavaScript: Welchen Wert du auch angibst, es gibt keinerlei Garantie, dass „Internationale Musikinitiative“ genau die Breite des divs hat. Es kann kürzer oder länger sein (dann Zeilenumbruch).

LLAP 🖖

[Linuchs]

Hallo Gunnar,

danke dir, das Prinzip ist okay, Feintuning muss ich noch machen.

Linuchs