Sicherstellen der Beibehaltung des Seitenverhältnisses im Ansichtsfenster

Beim Webdesign ist die Beibehaltung des Seitenverhältnisses von Elementen bei gleichzeitiger Anpassung an variable Ansichtsfensterabmessungen von entscheidender Bedeutung. Dies gewährleistet Konsistenz über verschiedene Bildschirmgrößen und -ausrichtungen hinweg. Um diese Erhaltung speziell beim Umgang mit einem quadratischen Element zu erreichen, kann der folgende CSS-Ansatz implementiert werden:

Nutzung der Aspektverhältnis-Eigenschaft

Ab 2022 der Aspekt -ratio-Eigenschaft bietet eine robuste Lösung zur Steuerung des Seitenverhältnisses von Elementen. Durch Angabe des gewünschten Verhältnisses von Breite zu Höhe passt diese Eigenschaft die Größe des Elements an, um das angegebene Verhältnis beizubehalten. Entscheidend ist, dass die Größenanpassung durch die kleinste Abmessung des Ansichtsfensters eingeschränkt wird und die Anforderung einer dynamischen Anpassung sowohl an Quer- als auch an Hochformatausrichtungen erfüllt.

Beispielimplementierung

Zur Veranschaulichung Um die Funktionalität der Eigenschaft „aspect-ratio“ zu nutzen, kann der folgende Code verwendet werden:

Aspect ratio 1:1
Aspect ratio 1:19

.ar-1-1 {
  aspect-ratio: 1 / 1;
  background: orange;
}

.ar-1-19 {
  aspect-ratio: 16 / 9;
  background: pink;
}

div {
  max-width: 100vw;
  max-height: 100vh;
  margin-bottom: 5vh;
}

In diesem Beispiel werden zwei Divs mit unterschiedlichen Seitenverhältnissen (1:1 und 16:9) erstellt. Die Eigenschaft „Seitenverhältnis“ stellt sicher, dass diese Divs unabhängig von der Ausrichtung des Geräts ihre gewünschte Form und Größe im Ansichtsfenster beibehalten. Darüber hinaus werden ihre Abmessungen an die kleinste Abmessung des Ansichtsfensters angepasst, um sicherzustellen, dass die quadratische Form erhalten bleibt.