HTML Webdesign

Texte proportional mit Bildern skalieren

Texte proportional mit Bildern skalieren

Texte proportional mit Bildern skalieren. Ändert sich der Viewport, skalieren responsive Websites auch die Bilder. Texte werden jedoch nicht mit skaliert.

Texte proportional mit Bildern skalieren: Die Bildgröße in Abhängigkeit vom zur Verfügung stehenden Platz anzupassen gehört zu den Grundlagen responsiver Websites. Umgesetzt wird das mit wenigen Zeilen CSS-Code.

Gibt es jedoch innerhalb des Bildes auch Textinhalte, dann haben statische Schrift-Größenangaben wie px oder em zur Folge, dass die Textgröße konstant bleibt, während das Bild proportional zur Browserfensterbreite bzw. zum Viewport skaliert wird.

Dadurch können zwei Probleme entstehen:

  1. Oft weisen Bildhintergründe keine einheitliche Helligkeit auf. Sie sind in einigen Bereichen hell, in anderen dunkel. Im Zug der Bildskalierung ändert sich häufig auch die Lesbarkeit des Textes, wenn sich die Größe des Hintergrundbildes reduziert, die Textgröße jedoch konstant bleibt.

    Zur Veranschaulichung:

    Texte mit Bildern skalieren

  2. Reduziert sich der zur Verfügung stehende Platz, so kommt es zu Textumbrüchen. Dadurch kann das gewünschte Design aus Text und Bild gegebenenfalls nicht aufrecht erhalten werden.

Manche Webdesigner behelfen sich damit, die Texte in Photoshop direkt ins Bild zu integrieren und so das Skalierungsproblem zu umschiffen. Aus Gründen der Suchmaschinenoptimierung ist ein solches Vorgehen aber meist unerwünscht. Zudem ist die Änderung der Texte verhältnismäßig aufwendig, da dafür ein neues Bild erstellt und eingebaut werden muss.

Texte proportional mit Bildern skalieren

Mittels der Einheiten vw (= Viewport Width) beziehungsweise vh (= Viewport Height) lassen sich Text proportional mit Bildern skalieren. Indem die Schriftgröße mit der Einheit vw definiert wird, erfolgt proportional zur Größe des Viewports eine Textvergrößerung bzw. Textverkleinerung.

Die Einheiten lassen sich auch auf andere Elemente wie padding anwenden.

BEISPIEL ANSEHEN

 

 

Stichworte: Texte proportional mit Bildern skalieren

Artikel bewerten

0 Kommentare zu “Texte proportional mit Bildern skalieren

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Wir benutzen Cookies um die Nutzerfreundlichkeit der Webseite zu verbessen. Durch Ihren Besuch stimmen Sie der Verwendung von Cookies zu.