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:
- 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:
- 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<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name=description content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Texte proportional skalieren - Beispiel ansehen</title>
<style>
body {
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
}
img {
width: 100%;
height: auto;
}
#text-content {
font-family: verdana, arial, helvetica sans-serif;
color: #fff;
position: absolute;
top:0;
left:0;
right:0;
bottom: 0;
padding:3vw;
}
h1 {
font-size:4.5vw;
font-weight: normal;
}
p {
font-size:3vw;
}
.button {
margin-top: 15vw;
}
.button a {
display: inline;
font-size:2.5vw;
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
border: 0.25vw solid #fff;
padding: 0.4em;
}
.button a:hover {
color: #464a52;
background: rgba(255,255,255,0.7);
}
</style>
</head>
<body>
<div class="wrapper">
<img src="img_bg_avs_sunset_4322.jpg" alt="" title="">
<div id="text-content">
<h1>Sunset | <strong>Sonnenuntergang</strong></h1>
<p>Die schönste Stunde.</p>
<div class="button"><a href="#">Zur Sonne</a></div>
</div>
</div>
</body>
</html>
Stichworte: Texte proportional mit Bildern skalieren
0 Kommentare zu “Texte proportional mit Bildern skalieren”