CSS Seitenverhältnis Rechner

Einstellungen

Ausgabe & CSS

Berechnete Höhe 1080
Seitenverhältnis 16 / 9

Häufige Bildschirmgrößen

CSS-Ausgabe

 
   
 
 
   
 
 
 
So wird's verwendet
 
     
  1. Breite eingeben — Die Elementbreite in Pixeln eingeben, um die zugehörige Höhe zu berechnen.
    2.  
  2. Preset-Verhältnis wählen — 16:9, 4:3, 1:1, 3:2 oder 21:9 für gängige Seitenverhältnisse auswählen.
    3.  
  3. Eigenes Verhältnis nutzen — „Benutzerdefiniert" klicken und ein beliebiges Breite:Höhe-Verhältnis eingeben.
    4.  
  4. Übliche Größen ansehen — Die Tabelle zeigt berechnete Höhen für 1920px, 1280px, 768px und 375px Breite.
    5.  
  5. CSS kopieren — Die aspect-ratio-Eigenschaft direkt in das Stylesheet einfügen.
    6.  
 
 
 
Was ist die CSS aspect-ratio Eigenschaft?
 
Die aspect-ratio-Eigenschaft legt das Breite-zu-Höhe-Verhältnis eines Elements fest. Bei gesetzter Breite berechnet der Browser die Höhe automatisch — ganz ohne JavaScript. Ideal für responsive Bilder, Video-Einbettungen und Karten, die ihre Proportionen bei jeder Größe beibehalten müssen.
 
Sie wird von allen modernen Browsern unterstützt und ersetzt ältere Tricks wie den „padding-top-Prozent-Hack" durch saubere, lesbare Syntax.
 
 
 
Häufige Anwendungsfälle
 
 
Responsive Video-Einbettungen
 
Bild-Platzhalter
 
Einheitliche Karten-Vorschaubilder
 
Canvas-Elemente
 
Karten-Container
 
Social-Media-Vorschauboxen
 
 
Tipps & Best Practices
 
 
 Mit width: 100% kombinieren 
aspect-ratio zusammen mit width: 100% verwendet, um ein vollständig fluides Element zu erhalten, das mit seinem Container skaliert und dabei die Proportionen beibehält.
 
 
 Auf img-Elementen verwenden 
aspect-ratio auf img-Tags verhindert Layout-Verschiebungen beim Laden — der Browser reserviert den richtigen Platz, bevor das Bild geladen ist.
 
 
 Mit expliziten Maßen überschreiben 
Hat ein Element sowohl aspect-ratio als auch eine explizite Höhe, gewinnt die explizite Höhe. So lässt sich das Verhältnis bei Bedarf überschreiben, ohne die Eigenschaft zu entfernen.
 
 
 16:9 für Video 
16:9 ist das Standard-Breitbildformat für YouTube, Vimeo und Web-Video. 4:3 eignet sich für ältere Videos; 21:9 ist das kinematische Ultraweit-Format.
 
 
 
Häufig gestellte Fragen
 
 
Wie wurde das Seitenverhältnis vor der CSS-Eigenschaft umgesetzt?
 
Entwickler nutzten den „padding-top-Hack": padding-top auf einen Prozentwert setzen (z. B. 56,25 % für 16:9) bei einem Container mit position: relative und absolut positioniertem Kind. Die aspect-ratio-Eigenschaft macht das überflüssig.
 
 
 
Funktioniert aspect-ratio auf allen HTML-Elementen?
 
Ja — es funktioniert auf jedem Block- oder Inline-Block-Element sowie auf Flex- und Grid-Items. Besonders nützlich bei img, video, iframe und div-Containern.
 
 
 
Was ist das 16:9-Verhältnis als Dezimalzahl?
 
16 geteilt durch 9 ergibt ca. 1,777. Höhe berechnen: Breite durch 1,777 teilen. Breite berechnen: Höhe mit 1,777 multiplizieren.
 
 
 
Kann ich aspect-ratio ohne Breite verwenden?
 
Ja. Hat das Element eine definierte Höhe aber keine explizite Breite, berechnet der Browser die Breite anhand des Verhältnisses. Seltener, aber vollständig unterstützt.