Reines CSS zum Anpassen der Div-Höhe entsprechend der adaptiven Breite (Prozentsatz)

Unter den Anforderungen des heutigen responsiven Layouts ist bei vielen Elementen, deren Größe automatisch angepasst werden kann, eine Höhen- und Breitenanpassung möglich. So kann beispielsweise img über {width:50%;height:auto;} eine Bildhöhenanpassung entsprechend dem Breitenverhältnis erreichen.

Das am häufigsten verwendete Tag, Div, kann sich jedoch nicht automatisch anpassen (entweder vom übergeordneten Element erben, px selbst angeben oder einen Prozentsatz angeben! Dieser Prozentsatz wird jedoch basierend auf der Höhe des übergeordneten Elements berechnet, nicht auf der Breite des Elements selbst. Daher ist es unmöglich, ein bestimmtes Verhältnis zwischen der Breite und Höhe von Div =-= zu erreichen).

Um diese Funktion (Div-Höhe: Breite = 1:1) zu erreichen, wissen wir durch verschiedene Verbesserungen, dass es mehrere Möglichkeiten gibt, damit umzugehen:

1. Geben Sie die Breite und Höhe des Div + Zoom direkt an, um eine Anpassung zu erreichen

div{Breite:50px;Höhe:50px;Zoom:1.1;}

Dadurch kann die anfängliche gleiche Breite und Höhe der Divs erreicht werden, aber die Einschränkungen sind zu groß. PASS!

2. Verwenden Sie js, um die Breite des Div dynamisch zu bestimmen und die Höhe festzulegen

div{width:50%;}

Fenster.beiGrößenänderung = Funktion(){div.Höhe(div.Breite);}

Es ist auch möglich, Divs mit gleicher Breite und Höhe zu erreichen, aber das fühlt sich immer etwas seltsam an, PASS!

3. Nach Breiten- und Höheneinheiten festlegen

div{width:20vw;height:20vw;/*20vw sind 20 % der Ansichtsfensterbreite*/}

Allerdings unterstützen viele Geräte dieses Attribut nicht und die Kompatibilität ist zu schlecht, PASS!

4. Durch Float festlegen

#aa{Hintergrund:#aaa;;}
#bb{Hintergrund:#ddd;;float:links}
#cc{Hintergrund:#eee;;float:rechts}

<div id="aa">übergeordnetes div
  <div id="bb">untergeordnetes Div</div>
  <div id="cc">untergeordnetes Div</div>
  <div style="clear:both">Dies wird zum Löschen von Fehlern verwendet</div>
</div>

Das übergeordnete Element aa kann seine Höhe automatisch entsprechend der Höhe des untergeordneten Elements ändern (adaptive Elemente in den untergeordneten Elementen platzieren), um das Seitenverhältnis konsistent anzupassen. Dies ist jedoch zu mühsam. BESTANDEN!

5. Schließlich der ultimative Killer, diese Funktion wird durch Polsterung erreicht

Durch Experimente mit den oben genannten Lösungen wurde festgestellt, dass die Breitenanpassung entsprechend der Breite des Ansichtsfensters angepasst wird. Beispielsweise bedeutet {width: 50%} 50 % des sichtbaren Bereichs des Browsers und wird nach der Größenänderung automatisch angepasst.

Wenn die Höhe als Prozentsatz angegeben wird, wird automatisch die Höhe des anzupassenden Ansichtsfensters ermittelt, die nichts mit der Breite zu tun hat. Natürlich können die beiden kein proportionales Verhältnis erreichen. Mit dieser Idee im Hinterkopf können wir dieses Problem lösen, indem wir eine Eigenschaft finden, die mit der Breite des Ansichtsfensters zusammenhängt.

Diese Eigenschaft ist die Polsterung. Die Polsterung wird entsprechend der Breite des Ansichtsfensters angepasst. Zufälligerweise werden auch die Polsterung oben und unten basierend auf der Breite des Ansichtsfensters berechnet. Durch Festlegen dieser Eigenschaft kann also eine gewisse proportionale Beziehung zur Breite erreicht werden.

Wir geben zunächst die Breite des Elements auf 50 % des übergeordneten Elements an (das übergeordnete Element ist jedes Element mit Höhe und Breite. Sie können kein bestimmtes übergeordnetes Element angeben, da dies sonst die Vielseitigkeit dieser Lösung beeinträchtigt).

.Vater{Breite:100px;Höhe:100px;Hintergrund:#222}

.element{width:50%;background:#eee;}

Zu diesem Zeitpunkt setzen wir die Höhe des Elements auf 0 und die Polsterung unten auf 50 %.

.element{width:50%;height:0;padding-bottom:50%;background:#eee;}

Das Element wird zu einem Quadrat mit einer Breite von 50 % und einer Höhe von 0 (es hat jedoch einen unteren Abstand von 50 % Breite). Der Effekt ist wie im grau-weißen Div in der folgenden Abbildung dargestellt.

An dieser Stelle könnte sich jemand fragen: Wenn die Höhe dieses Div 0 ist, was ist, wenn ich ein Element innerhalb eines Elements platzieren möchte? Würde das nicht überlaufen? Hier müssen wir das Überlaufattribut erwähnen, das unter Berücksichtigung des Inhalts und der Polsterung des Div berechnet wird, d. h.

Ursprünglich war Ihr Div möglicherweise ein Div mit {width: 50px; height: 50px; padding: 0}, aber jetzt wird es ein Div mit {width: 50px; height: 0; padding-bottom: 50px;}. Die Größe ist immer noch dieselbe. Durch Angabe der Positionierung der untergeordneten Elemente dieses Divs kann es weiterhin normal angezeigt werden.

Auf diese Weise können wir diese Anforderung (festes Verhältnis von Div-Breite und -Höhe) in jedem Fall erreichen, indem wir das übergeordnete Element „father“, das von uns benötigte Element „element“ und das untergeordnete Element „datail“ festlegen.

Dies ist das Ende dieses Artikels darüber, wie man mit reinem CSS die Div-Höhe entsprechend der adaptiven Breite (Prozentsatz) anpasst. Weitere relevante Inhalte zum Anpassen der Div-Höhe entsprechend der adaptiven Breite finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder stöbern Sie weiter in den verwandten Artikeln unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!