So implementieren Sie adaptive Container mit gleichem Seitenverhältnis mit CSS

Als ich kürzlich eine mobile Seite entwickelte, stieß ich auf folgende Situation: Bei einer Seitenbreite von 100 % entspricht die Höhe der halben Breite und bleibt auch bei einer Änderung der Breite des Telefons halb so hoch.

Daher müssen wir einen Container mit adaptiver Breite und halber Höhe implementieren.

Hier nehmen wir das Beispiel, dass die Höhe die Hälfte der Breite beträgt, es kann aber auch jedes andere Verhältnis sein.

1. Überlegen Sie, wie Sie es erreichen können

Dieses Problem ist ähnlich wie: wir haben ein Bild mit einer Breite von 100% auf der mobilen Seite. Wenn wir die Höhe nicht festlegen, wird das Bild proportional entsprechend der Originalgröße skaliert.

Wir können diese Idee verwenden, um für das Element eine entsprechende proportionale Höhe entsprechend der Höhe des Elements festzulegen.

2. Implementierungsmethode 1 - durch VW-Ansichtsfenstereinheiten

Die sogenannten Viewport-Einheiten sind relativ zur Größe des Viewports. 100vw entsprechen 100 % der Viewport-Breite, das heißt 1vw entspricht 1 % der Viewport-Breite.

Wir können diese Funktion verwenden, um einen adaptiven Container mit gleichem Seitenverhältnis auf Mobilgeräten zu implementieren.

HTML Quelltext:

<div Klasse="Box">
    <img src="http://images.pingan8787.com/2019_07_12guild_page.png" />
</div>

CSS Code:

*{
    Rand: 0;
    Polsterung: 0
}
.Kasten{
    Breite: 100 %;
    Höhe: 51,5 vw
}
.box img{ 
    Breite: 100 %; 
}

Warum beträgt die Höhe der .box 51,5 VW?

Der Grund dafür ist, dass die Originalgröße des Bildes 884 * 455 beträgt, mit einem Breite-zu-Höhe-Verhältnis von 455 / 884 = 51,5 %.

Im Vergleich zur ursprünglichen proportionalen Skalierung des Bildes bietet diese Methode einen Vorteil: Unabhängig davon, ob das Bild erfolgreich geladen wurde, wird die Containerhöhe immer berechnet, sodass es nicht zu Seitenzittern oder Neuzeichnen der Seite kommt und die Leistung dadurch verbessert wird.

Schauen wir uns den Vergleich zwischen erfolgreichem und fehlgeschlagenem Laden von Bildern in diesem Fall an:

3. Implementierungsmethode 2 - durch Unterelement-Auffüllen

Dies wird erreicht, indem das Padding-Attribut des untergeordneten Elements festgelegt wird. Dies ist eine gängige Methode und hat bessere Auswirkungen. Hier muss verstanden werden, dass sich der Prozentwert des Padding-Attributs des untergeordneten Elements zunächst auf die Breite des übergeordneten Containers bezieht.

Nachfolgend sehen Sie das Code- und Effektdiagramm:

HTML Quelltext:

<div Klasse="Box">
    <div class="text">Ich bin Wang Pingan, pingan8787</div>
</div>

CSS Code:

.Kasten{
    Breite: 200px;
}
.Text{
    Polsterung: 10%;
} 

analysieren:

Hier setzen wir die Breite des übergeordneten Containers .box auf 200px und die Polsterung des untergeordneten Elements .text auf 10 %, sodass das Ergebnis der Polsterungsberechnung von .box 20px beträgt;

Als nächstes verwenden wir in Verbindung mit dem Thema dieses Prinzip, um das Problem der gleichen Proportionen zu lösen:

HTML Quelltext:

<div Klasse="Box">
    <div Klasse="Text">
        <img src="http://images.pingan8787.com/2019_07_12guild_page.png" />
    </div>
</div>

CSS Code:

.Kasten{
    Breite: 100 %;
}
.Text{
    Überlauf: versteckt;
    Höhe: 0;
    Polsterung unten: 51,5 %;
}
.box .text img{
    Breite: 100 %;
}

Hier wird padding-bottom: 51.5%; von .text ebenfalls nach der ersten Methode berechnet, wobei das Seitenverhältnis der Originalgröße des Bildes verwendet wird. Es ist zu beachten, dass, wenn .text auf height: 0; eingestellt ist, die Höhe höher als die tatsächliche Größe ist. Um diese Situation zu vermeiden, müssen Sie daher height: 0; einstellen.

Daher haben wir dieses Problem auf zwei Arten gelöst.

Zusammenfassen

Oben ist die Methode, die ich Ihnen vorgestellt habe, um adaptive Container mit gleichem Seitenverhältnis in CSS zu erstellen. Ich hoffe, sie wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!