jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose Aspect-Ratio-Placeholder-Rechner

Berechne aspect-ratio-CSS-Werte und padding-bottom-Fallbacks gegen Layout Shift.

Tool wird geladen...

Was ist Aspect-Ratio-Placeholder-Rechner?

Aspect-ratio ist eine CSS-Eigenschaft, die ein bevorzugtes Seitenverhältnis für ein Element festlegt, sodass der Browser die Höhe aus der Breite berechnen kann, bevor der Inhalt geladen wird. Dies verhindert Cumulative Layout Shift (CLS), eine Core Web Vitals-Metrik, die die visuelle Stabilität misst. Durch das vorzeitige Reservieren des korrekten Platzes für Bilder, Videos und Embeds bleibt das Seitenlayout stabil, während Ressourcen laden.

Kurze Antwort

Berechnen Sie den CSS aspect-ratio Wert und den padding-bottom Fallback-Prozentsatz, um Cumulative Layout Shift zu verhindern. Reservieren Sie den korrekten Platz für Bilder, Videos und Embeds, bevor sie laden.

Last updated: 2026-06-11

Einschränkungen

  • Die padding-bottom Fallback-Technik erfordert position: relative auf dem Elterncontainer und position: absolute auf dem Kind-Element.
  • Aspect-ratio funktioniert nur, wenn das Element eine definierte Breite hat. Bei auto oder nicht gesetzter Breite hat die Berechnung keine Basis.
  • Die Verwendung von aspect-ratio ohne definierte Breite oder Höhe auf Bildern kann Cumulative Layout Shift während des Seitenladens verursachen.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Wählen Sie ein voreingestelltes Verhältnis wie 16:9, 4:3 oder 1:1, oder geben Sie benutzerdefinierte Breiten- und Höhenwerte ein.
  2. Zeigen Sie den generierten aspect-ratio CSS-Wert für moderne Browser an.
  3. Kopieren Sie den padding-bottom Fallback für Browser, die die aspect-ratio-Eigenschaft nicht unterstützen.
  4. Wenden Sie das Wrapper-Markup auf Ihr Bild- oder Embed-Element an. Der Platzhalter reserviert die korrekte Höhe, bevor die Ressource lädt.

Wofür du es nutzen kannst

  • Platz für Heldenbilder in Blogbeiträgen reservieren, damit das Layout nicht springt, wenn das Bild geladen wird.
  • Stabile Video-Embed-Container für YouTube- oder Vimeo-iframes erstellen, die das Player-Seitenverhältnis bewahren.
  • Platzhalter-Boxen für lazy-geladene Bilder in einem Galerie-Raster bauen.

Anwendungsfalle

Praxisbeispiele

Beispiel

Blog-Heldenbild mit 16:9-Verhältnis

Ein Blog umschließt das Heldenbild in einem Container mit aspect-ratio: 16/9. Der Browser reserviert eine 16:9-Box, bevor die Bild-URL lädt.

Beispiel

Video-Embed mit padding-bottom Fallback

Eine Tutorial-Seite bettet YouTube-iframes in einem 16:9-Wrapper ein. aspect-ratio behandelt moderne Browser, und der padding-bottom: 56.25% Fallback deckt Safari 14 ab.

Haufige Fehler

  • aspect-ratio auf ein Bild anwenden, aber keine definierte Breite setzen, was das Element in manchen Layout-Kontexten auf Nullgröße belässt.
  • Eine feste Höhenangabe auf demselben Element hinzufügen, das aspect-ratio verwendet, was einen Konflikt erzeugt.
  • aspect-ratio ohne Test des padding-bottom Fallbacks in Browsern verwenden, die es nicht unterstützen.

Überprüfung

  1. Laden Sie die Seite bei verschiedenen Viewport-Breiten und überprüfen Sie, ob der Platzhalter das korrekte Seitenverhältnis ohne Layout-Verschiebung beibehält.
  2. Testen Sie in einem älteren Browser, indem Sie aspect-ratio in den DevTools deaktivieren und bestätigen, dass der padding-bottom Fallback das Verhältnis bewahrt.

FAQ

Fragen zu Aspect-Ratio-Placeholder-Rechner

Welche Browser unterstützen die aspect-ratio CSS-Eigenschaft?

Aspect-ratio wird in allen modernen Browsern ab 2024 unterstützt: Chrome 88, Firefox 87, Safari 15 und Edge 88. Für ältere Browser den padding-bottom Prozent-Fallback verwenden.

Was ist ein gutes Standard-Seitenverhältnis für Blog-Bilder?

16:9 ist eine übliche Wahl für Blog-Heldenbilder und Video-Embeds. 4:3 eignet sich gut für Screenshots und Fotos. 1:1 ist nützlich für Profilbilder und Produkt-Thumbnails.

Brauche ich den padding-bottom-Hack noch?

Der padding-bottom Prozent-Fallback wird nur für Browser benötigt, die die CSS aspect-ratio-Eigenschaft nicht unterstützen. Die meisten modernen Browser unterstützen aspect-ratio direkt.

Sollte ich sowohl Breite als auch Höhe mit aspect-ratio setzen?

Das Setzen von Breite und Höhe auf dem Element zusammen mit aspect-ratio erzeugt einen Größenkonflikt. Setzen Sie eine Dimension mit aspect-ratio.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren