Schriftgrößen in vw – Bilder mit Texten proportional skalieren

Textinhalte die optisch in oder vor einem Bild positioniert werden sollen, stellen in einem flexiblen Layout eine große Herausforderung dar. Das Problem besteht darin, dass Bilder meist proportional skaliert werden, wohingegen Texte einfach nur an anderer Stelle umbrechen. Dadurch entsteht ein schwer steuerbares Ungleichgewicht.

Individuelle Breakpoints für jedes Bild sind zwar technisch möglich, in der Praxis jedoch meist nicht realistisch. Auch wäre es denkbar, den Text direkt mit in die Grafik zu speichern, doch aus Gründen der Suchmaschinenoptimierung, Editierbarkeit und Übersetzbarkeit ist eine solche Lösung ebenfalls inakzeptabel.

In diesem Beitrag erklären wir, wie Texte, die optisch vor einem Bild platziert wurden, gemeinsam mit dem Bild proportional skaliert werden können.

Texte mit Hilfe der Einheit vw proportional skalieren

Die Einheit vw (Viewport Width) ermöglicht es Elemente anhand der Breite oder der Höhe (vh = Viewport Height) des Viewports zu gestalten. Wenn man die Schriftgröße in vw angibt, skaliert der Text automatisch größer und kleiner, wenn der Viewport sich verbreitert.

h1 {
  font-size: 7vw; 
} 

p {
   font-size: 4vw; 
}

Doch nicht nur Texte können in vw definiert werden, auch Abmessungen mit padding, Umrahmungen mit border und die meisten anderen Eigenschaften lassen sich mit diesem Trick wunderbar flexibel gestalten.

Beispiel: Bild, Text und Button proportional skalieren

Das folgende Beispiel zeigt die praktische Anwendung.

Beispiel anschauen

Folgender Code wird benötigt um das Beispiel herzustellen:

<div>
 <img src="bild.jpg" alt="">
 <div class="textcontainer">
 <h1>Headline</h1>
 <p>Lorem ipsum dolor <br>sit amet, consectetur  <br>adipisicing elit.</p>
 <a href="#">Button</a>
 </div>
</div>

div {
   position: relative; 
}

img {
   width: 100%;
   height: auto;
} 

.textcontainer {
   color: white;
   font-family: arial, sans-serif;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 5vw;
} 

h1 {
   font-size: 7vw;
} 

p {
   font-size: 4vw; 
} 

a {
   font-size: 4vw;
   color: white;
   text-decoration: none;
   padding: .5em 1em;
   border: .1em solid #DA9C07;
   display: inline-block;
   margin-top: 2vw;
}