CSS Seitenverhältnis-Rechner & Responsive Padding-Hack Konverter
Berechnung des modernen aspect-ratio und klassischen padding-top Prozent-Hacks mit reaktionsschnellem Echtzeit-Vorschaubox
Ein nützliches Werkzeug, um feste Breiten- zu Höhen-Seitenverhältnisse für Bilder, Videoplayer und Iframe-Container mithilfe moderner CSS-Regeln oder älterer Prozent-Hacks beizubehalten.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Geben Sie die Pixelmaße (Breite/Höhe) ein oder wählen Sie Standardauflösungs-Voreinstellungen (16:9, 4:3 usw.).
- Beobachten Sie das vereinfachte ganzzahlige Verhältnis und das berechnete padding-top Prozent-Äquivalent.
- Verwenden Sie den Breitenregler, um die Reaktionsfähigkeit visuell zu überprüfen, und kopieren Sie die gewünschten CSS-Regeln.
FAQ
- Was ist der padding-top Seitenverhältnis-Hack?
- Er nutzt die CSS-Spezifikation, dass die prozentuale Auffüllung auf der Breite des Elternelements basiert. Die Kombination von Nullhöhe mit padding-top etabliert ein reaktionsschnelles Layoutverhältnis.
- Funktioniert aspect-ratio im Internet Explorer?
- Nein. IE 11 und älter unterstützen CSS-Seitenverhältnisse nicht. Für maximale Kompatibilität mit alten Browsern muss der padding-top Hack verwendet werden.