So behalten Sie das Seitenverhältnis von Elementen in variablen Ansichtsfenstern bei: Eine ausführliche Anleitung zur Eigenschaft „Seitenverhältnis“?

Sicherstellung der Beibehaltung des Seitenverhältnisses im Ansichtsfenster

Beim Webdesign ist die Beibehaltung des Seitenverhältnisses von Elementen bei gleichzeitiger Anpassung an variable Abmessungen des Ansichtsfensters 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:

Verwendung der Eigenschaft „aspect-ratio“

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:

<code class="html"><div class="ar-1-1">Aspect ratio 1:1</div>
<div class="ar-1-19">Aspect ratio 1:19</div></code>

<code class="css">.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;
}</code>

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.

Das obige ist der detaillierte Inhalt vonSo behalten Sie das Seitenverhältnis von Elementen in variablen Ansichtsfenstern bei: Eine ausführliche Anleitung zur Eigenschaft „Seitenverhältnis“?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!