Wie man das Verhältnis von Breite zu Höhe beibehält

Lernen Sie, wie Sie mit CSS das Verhältnis von Breite zu Höhe der Elemente beibehalten.

Wie man es macht - Höhe gleich Breite

Schritt 1 - Fügen Sie HTML hinzu:

Verwenden Sie ein Container-element, wie z.B. <div>Wenn Sie Text enthalten möchten, fügen Sie einen Unter-element hinzu:

<div class="container">
  <div class="text">Einige Texte</div> <!-- Wenn Sie Text im Container haben möchten -->
</div>

Schritt 2 - Fügen Sie CSS hinzu:

für padding-top Fügen Sie Prozentsätze hinzu, um das Breitheit zu Höhe Verhältnis des DIVs beizubehalten. Das folgende Beispiel erstellt ein DIV mit einem Breitheit zu Höhe Verhältnis von 1:1 (Breite und Höhe sind immer gleich):

Beispiel - Breitheit zu Höhe Verhältnis 1:1

.container {
  background-color: red;
  width: 100%;
  padding-top: 100%; /* Breitheit zu Höhe Verhältnis 1:1 */
  position: relative; /* Wenn Sie Text innen haben möchten */
}
/* Wenn Sie Text im Container haben möchten */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Versuchen Sie es selbst

Andere Breitheit zu Höhe Verhältnisse

Beispiel - Breitheit zu Höhe Verhältnis 16:9

.container {
  padding-top: 56.25%; /* Breitheit zu Höhe Verhältnis 16:9 (9 geteilt durch 16 ergibt 0.5625) */
}

Versuchen Sie es selbst

Beispiel - Breitheit zu Höhe Verhältnis 4:3

.container {
  padding-top: 75%; /* Breitheit zu Höhe Verhältnis 4:3 (3 geteilt durch 4 ergibt 0.75) */
}

Versuchen Sie es selbst

Beispiel - Breitheit zu Höhe Verhältnis 3:2

.container {
  padding-top: 66.66%; /* Breitheit zu Höhe Verhältnis 3:2 (2 geteilt durch 3 ergibt 0.6666) */
}

Versuchen Sie es selbst

Beispiel - Breitheit zu Höhe Verhältnis 8:5

.container {
  padding-top: 62.5%; /* Breitheit zu Höhe Verhältnis 8:5 (5 geteilt durch 8 ergibt 0.625) */
}

Versuchen Sie es selbst

CSS aspect-ratio attribute

In neueren Browsern können Sie einfach CSS verwenden aspect-ratio Eigenschaft:

Beispiel - Breitheit zu Höhe Verhältnis 3:2

.container {
  aspect-ratio: 3 / 2;
}

Versuchen Sie es selbst

Tabelle: Die Nummer gibt die erste Browser-Version an, die die Eigenschaft vollständig unterstützt.