Seitenverhältnis Rechner — Responsive Design Dimensionen
Berechne fehlende Dimensionen aus Seitenverhältnissen mit unserem Seitenverhältnis Rechner. Generiere CSS-Code für responsive Medien mit moderner aspect-ratio-Eigenschaft oder klassischer padding-bottom Technik. Perfekt für responsive Bilder, Video-Embeds und Layout-Design mit gängigen Presets wie 16:9, 4:3, 21:9 und mehr.
Funktionen
- Berechnung fehlender Breite oder Höhe aus Seitenverhältnis
- Gängige Verhältnis-Vorlagen (16:9, 4:3, 21:9, 1:1, etc.)
- CSS padding-bottom-Trick Generator
- Mehrere Verhältnis-Formate (Verhältnis, Dezimal, Prozent)
- Responsive Bildgrößen-Rechner
- Echtzeit-Berechnung
- 100% clientseitige Verarbeitung
Häufige Seitenverhältnisse
- 16:9 — Standard HD-Video, YouTube, moderne Displays
- 4:3 — Klassisches TV, ältere Monitore
- 21:9 — Ultrawide-Monitore, Kinoleinwand
- 1:1 — Quadratisch (Instagram-Posts)
- 9:16 — Vertikales Video (Instagram Stories, TikTok)
Häufige Anwendungsfälle
- Responsive Bilder: Seitenverhältnis beim Skalieren von Bildern beibehalten
- Video-Einbettungen: Iframe-Dimensionen für YouTube, Vimeo berechnen
- CSS-Seitenverhältnis: Padding-bottom-Trick für ältere Browser generieren
- Bildgrößen-Anpassung: Zuschneide- oder Skalierungs-Dimensionen berechnen
- Layout-Design: Responsive Grid-Layouts planen
CSS-Seitenverhältnis-Techniken
Moderner Ansatz (CSS aspect-ratio):
.container { aspect-ratio: 16 / 9; width: 100%;
}Legacy-Ansatz (padding-bottom-Trick):
.container { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 = 9/16 = 56,25% */
}
.container > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}Nützliche Ressourcen
Wikipedia: Seitenverhältnis Einsteigerfreundliche Einführung in Seitenverhältnisse bei Bildern und Videos
MDN: CSS aspect-ratio Eigenschaft Moderne CSS-Eigenschaft zur Beibehaltung von Seitenverhältnissen
Smashing Magazine: Aspect Ratio in CSS Umfassende Anleitung zur Beibehaltung von Seitenverhältnissen in modernem CSS
W3C CSS Box Sizing Module Offizielle Spezifikation für CSS aspect-ratio
Neue CSS Aspect-Ratio Eigenschaft Google web.dev Anleitung zur modernen Seitenverhältnis-Behandlung