Skip to main content
FreeToolkit .ai

Seitenverhältnis-Box-Generator Erstellen Sie responsive Seitenverhältnis-Boxen mit modernen und herkömmlichen CSS-Ansätzen.

Seitenverhältnis-Box-Generator illustration
🎨

Seitenverhältnis-Box-Generator

Erstellen Sie responsive Seitenverhältnis-Boxen mit modernen und herkömmlichen CSS-Ansätzen.

1

Wählen Sie ein vordefiniertes Verhältnis oder ein benutzerdefiniertes Verhältnis

Wählen Sie aus gängigen Bildverhältnissen (16:9, 4:3, 1:1) oder geben Sie benutzerdefinierte Werte ein.

2

Konfigurieren Sie die Box

Legen Sie die maximale Breite, die Hintergrundfarbe fest und wählen Sie zwischen modernem oder veralteten CSS-Ansatz.

3

Kopieren Sie den CSS-Code

Vorschau des Bildverhältnis-Containers und Kopie des CSS-Codes.

Loading tool...

What Is Seitenverhältnis-Box-Generator?

Der Aspect Ratio Box Generator erstellt responsives Container, die unabhängig von ihrer Größe ein bestimmtes Breiten-Höhen-Verhältnis beibehalten. Das Beibehalten der Seitenverhältnisse ist für Videos, Bilder, Karten und jedes Element, das proportionale Dimensionen benötigt, essentiell. Dieses Tool bietet acht gängige Voreinstellungen: 1:1 (Quadrat), 4:3 (Standard), 16:9 (Breitbild), 21:9 (Ultrabreit), 3:2 (Foto), 9:16 (Hochformat), 2:3 (Plakat) und 3:4 (Tablet). Sie können auch benutzerdefinierte Verhältniswerte festlegen. Das Tool unterstützt sowohl die moderne CSS-Eigenschaft aspect-ratio als auch die Legacy-Technik mit padding-bottom für eine breitere Browserunterstützung. Die Vorschau zeigt den Aspect Ratio Box mit anpassbarer Maximalbreite und Hintergrundfarbe, und der generierte CSS-Code enthält den gewählten Ansatz.

Why Use Seitenverhältnis-Box-Generator?

  • Acht gängige Bildverhältnisse plus benutzerdefinierte Eingabe
  • Sowohl moderner (aspect-ratio) als auch veralteter (padding-bottom) CSS-Ansatz
  • Anpassbare maximale Breite und Hintergrundfarbe
  • Vorschau zeigt den proportionalen Container genau an

Common Use Cases

Video-Container

Erstellen Sie responsive Container im Verhältnis 16:9 für eingebettete Videos.

Bild-Platzhalter

Reservieren Sie Platz für Bilder, während sie geladen werden, um Layout-Verschiebungen zu vermeiden.

Responsive-Karten

Halten Sie die Proportionen von Karten über verschiedene Bildschirmgrößen hinweg konstant.

Fotogalerien

Erstellen Sie einheitliche Bildcontainer für Gitterlayouts in Galerien.

Technical Guide

Die moderne CSS-Eigenschaft aspect-ratio setzt direkt das bevorzugte Seitenverhältnis: aspect-ratio: 16 / 9. Der Browser berechnet die Höhe automatisch basierend auf der Elementbreite. Dies wird seit 2021 in allen modernen Browsern unterstützt. Die Legacy-Technik verwendet padding-bottom als Prozentsatz der Breite (da Padding-Prozent relative zur Elternbreite sind): padding-bottom: 56,25% erstellt ein 16:9-Seitenverhältnis (9/16 * 100 = 56,25%). Der Legacy-Ansatz erfordert position: relative auf dem Container und position: absolute; top: 0; left: 0; width: 100%; height: 100% auf dem untergeordneten Inhalt. Der moderne Ansatz ist einfacher und lesbarer. Beide Methoden erstellen responsives Container, die ihr Verhältnis bei jeder Breite beibehalten. Die Eigenschaft max-width begrenzt die Containerröße. Bei Bildern steuert die Eigenschaft object-fit, wie das Bild den Aspect Ratio-Container ausfüllt.

Tips & Best Practices

  • 1
    Verwenden Sie die moderne aspect-ratio-Eigenschaft für sauberen, einfacheren Code
  • 2
    Falls Sie ältere Browser unterstützen müssen, verwenden Sie den padding-bottom-Ansatz
  • 3
    Verwenden Sie object-fit: cover auf Bildern innerhalb von Aspect-Verhältnis-Containern
  • 4
    Legen Sie die maximale Breite fest, um zu verhindern, dass der Container auf breiten Bildschirmen zu groß wird

Related Tools

CSS-Flexbox-Spielplatz - free online tool

CSS-Flexbox-Spielplatz

Visueller CSS-Flexbox-Explorer mit interaktiven Steuerungselementen für alle Eigenschaften von Flex-Containern.

🎨 CSS & Design
CSS-Grid-Spielplatz - free online tool

CSS-Grid-Spielplatz

Visueller CSS-Grid-Builder mit interaktiven Steuerungen für Template-Spalten, -zeilen und Lücken.

🎨 CSS & Design
Responsiver Design-Tester - free online tool

Responsiver Design-Tester

Vorschau von Websites bei gängigen Geräte-Breakpoints mit einem integrierten iframe-Viewer.

🎨 CSS & Design
Medienabfrage-Generator - free online tool

Medienabfrage-Generator

Erstellen Sie CSS-Medienabfragen mit Funktionsbedingungen und vorgegebenen Breakpoints.

🎨 CSS & Design

Frequently Asked Questions

Q Was ist aspect-ratio in CSS?
Die aspect-ratio-Eigenschaft legt das bevorzugte Breite-zu-Höhe-Verhältnis eines Elements fest, z. B. aspect-ratio: 16 / 9.
Q Wird die aspect-ratio-Eigenschaft überall unterstützt?
Ja, sie wird in allen modernen Browsern unterstützt (Chrome 88+, Firefox 89+, Safari 15+, Edge 88+).
Q Was ist der padding-bottom-Trick?
Eine veraltete Technik, bei der das padding-bottom-Prozent (bezogen auf die Breite) das Verhältnis beibehält. 56,25 % erzeugt ein 16:9-Verhältnis.
Q Wie kann ich Inhalte in einen Aspect-Verhältnis-Container einfügen?
Mit der modernen aspect-ratio-Eigenschaft fließen die Inhalte normal. Mit dem padding-bottom-Ansatz müssen untergeordnete Elemente position: absolute haben.
Q Kann ich aspect-ratio mit Bildern verwenden?
Ja, kombinieren Sie aspect-ratio mit object-fit auf Bildern für responsive, proportionale Bildcontainer.

About This Tool

Seitenverhältnis-Box-Generator is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.