Mehrere Möglichkeiten zur Implementierung der CSS-Höhenänderung mit Breitenverhältnis

[Lösung 1: Padding-Implementierung]

Prinzip:

Wenn der Wert für die Polsterung eines Elements ein Prozentsatz ist, dann ist dieser Prozentsatz relativ zur Breite des übergeordneten Elements. Das Gleiche gilt für die untere Polsterung.

Verwenden Sie padding-bottom statt height, um den Effekt einer zur Breite proportionalen Höhe zu erzielen. Stellen Sie padding-bottom auf den gewünschten Höhenwert ein. Gleichzeitig

Seine Höhe wird auf 0 gesetzt, sodass die „Höhe“ des Elements dem Wert von „padding-bottom“ entspricht und so der gewünschte Effekt erzielt wird.

<div Klasse="Vater">
    <div Klasse = "childbox"></div>
</div>
<style type="text/css">
.childbox{
  Polsterung unten: 20 %;
  Breite: 20 %;
  Höhe: 0;
  Hintergrund: #888888;
}
</Stil>

Das Seitenverhältnis des obigen Beispiels beträgt 1:1. Dies bedeutet, dass es sich um ein Quadrat handelt und proportional zur Breite der übergeordneten Box skaliert wird.

[Lösung 2: Ein verstecktes Bild erreichen]

Prinzip:

Wenn dem Div-Container keine Höhe zugewiesen wird, wird seine Höhe erweitert, wenn sich die Elemente im Container ändern. Zu diesem Zeitpunkt fügen wir ein Bild hinzu, das unserem Seitenverhältnis im Container entspricht, und stellen die Breite des Bildes auf 100 % ein; die Höhe ist automatisch. Wir wissen, dass, wenn das Bild nur die Breite festlegt, sich die Höhe proportional zur Breite ändert und automatisch skaliert, sodass auch die Höhe unseres internen Untercontainers proportional skaliert wird. Natürlich können Sie dieses Bild ausblenden oder mit einem anderen Feld abdecken.

#Behälter {
  Breite: 100 %;
}
.attr {
  Hintergrundfarbe: #008b57;
}
.attr img{
  Breite: 100 %;
  Höhe: automatisch;
}
</Stil>
<div id='Behälter'>
  <div Klasse='attr'>
    <img src="1.png" alt="">
  </div>
</div>

Bei dieser Methode sind keine Kompatibilitätsüberlegungen erforderlich und sie läuft perfekt auf mobilen PCs. Abgesehen vom Hinzufügen einer DOM-Struktur ist es angesichts der Hunderten oder Tausenden von Codes auf einer Seite nicht der Rede wert.

Wenn Sie der Meinung sind, dass das Hinzufügen des img-Tags zu viele HTTP-Anfragen verursacht, kann die base64-Bildcodierung dieses Problem lösen. Da unser Bild nur eine Form benötigt,

Sie können es stark komprimieren und verschlüsseln und sogar die HTTP-Anfrage speichern.

[Schema 3: vw,vh]

Neue Einheiten von CSS3 (CSS3 ist großartig ~), wir definieren die Breite und Höhe des übergeordneten Containers als dasselbe vw, sodass die Höhe und Breite des übergeordneten Containers denselben Wert haben. Zu diesem Zeitpunkt werden die Breiten- und Höhenwerte des untergeordneten Containers als Prozentsätze festgelegt. Unabhängig davon, wie der übergeordnete Container seine Größe ändert, ändert sich das Höhen- und Breitenverhältnis des untergeordneten Containers nicht

Einheitenbeschreibung
vw ist relativ zur Ansichtsfensterbreite
vh ist die Höhe relativ zum Ansichtsfenster
vmin ist relativ zur kleineren Breite oder Höhe des Ansichtsfensters, gleichmäßig aufgeteilt in 100 Einheiten von vmin

vmax ist relativ zur größeren Breite oder Höhe des Ansichtsfensters, gleichmäßig aufgeteilt in 100 Einheiten von vmax

<div Klasse="Vater">
    <div Klasse = "childbox"></div>
</div>
.childbox{    
  Breite: 20 %;
  Höhe: 20vw;
  Hintergrund: #888888;
}

Damit ist dieser Artikel über verschiedene Möglichkeiten zur Implementierung einer CSS-Höhe proportional zur Breite abgeschlossen. Weitere relevante Inhalte zu CSS-Höhe proportional zur Breite finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!