Wie verhindere ich, dass ein Rechteck auf Mobilgeräten verzerrt wird?
- Die Problematik der Verzerrung auf Mobilgeräten
- Verwendung relativer Maßeinheiten
- Wahrung des Seitenverhältnisses
- Beispiel mit aspect-ratio
- Alternative Methoden
- Zusammenfassung
Die Problematik der Verzerrung auf Mobilgeräten
Ein Rechteck, das auf Desktop-Bildschirmen gut aussieht, kann auf Mobilgeräten schnell verzerrt wirken. Dies liegt oft daran, dass die feste Breite und Höhe nicht an unterschiedliche Bildschirmgrößen und Auflösungen angepasst werden. Wenn die Breite reduziert wird, passt sich die Höhe nicht automatisch an, wodurch das Rechteck seine Proportionen verliert und verzerrt wird. Um dies zu verhindern, ist ein anpassungsfähiges (responsives) Design notwendig.
Verwendung relativer Maßeinheiten
Statt fixe Pixelwerte für Breite und Höhe zu verwenden, bietet es sich an, relative Einheiten wie Prozent (%) oder viewport-Einheiten (vw, vh) zu verwenden. Diese Einheiten passen die Größe des Rechtecks dynamisch an die Bildschirmgröße an. Allerdings reicht das allein oft nicht aus, da Breite und Höhe unabhängig voneinander skaliert werden können und so immer noch Verzerrungen auftreten können.
Wahrung des Seitenverhältnisses
Ein entscheidender Schritt, um Verzerrungen zu vermeiden, ist das Beibehalten eines festen Seitenverhältnisses. Dazu gibt es verschiedene Techniken. Eine weit verbreitete Methode ist, die Höhe anhand der Breite mit einem bestimmten Faktor zu berechnen. Beispielsweise kann eine Container-Box mit position: relative und einem unteren Padding definiert werden, das proportional zur Breite ist, um das Verhältnis zu sichern. Alternativ kann CSS-eigenschaft aspect-ratio verwendet werden, die moderne Browser unterstützen.
Beispiel mit aspect-ratio
CSS bietet mit der Eigenschaft aspect-ratio eine direkte Möglichkeit, das Verhältnis zu setzen. Für ein Rechteck mit Breite zu Höhe von 2:1 kann man einfach aspect-ratio: 2 / 1; verwenden. In Verbindung mit einer dynamischen Breite passt sich das Rechteck auf allen Geräten korrekt an, ohne verzerrt zu werden.
Alternative Methoden
Falls aspect-ratio nicht ausreichend unterstützt wird, kann man das Padding-Trick-Verfahren nutzen. Dabei wird die Höhe des Containers durch ein prozentuales Padding-Top oder Padding-Bottom festgelegt, das sich an der Breite orientiert. Beispielsweise entspricht padding-top: 50% bei Breite 100% einem Seitenverhältnis von 2:1. Innerhalb dieses Containers kann dann das Rechteck absolut positioniert werden, um die richtige Größe zu erhalten.
Zusammenfassung
Um zu verhindern, dass ein Rechteck auf Mobilgeräten verzerrt wird, sollte man eine Kombination aus flexiblen Breiten und der Fixierung des Seitenverhältnisses nutzen. Die modernste und einfachste Möglichkeit ist die Verwendung von aspect-ratio. Bei Bedarf können auch bewährte Techniken mit Prozent-Padding eingesetzt werden. Dies sorgt dafür, dass das Rechteck stets proportional bleibt, egal wie sich die Bildschirmgröße verändert.