Wie zentriere ich ein Bild vertikal in einem Div mit responsiver Größe?

Ein Bild innerhalb eines Divs mit reaktionsfähiger Höhe vertikal ausrichten

Problem

Wie können wir ein Bild innerhalb eines Divs mit dynamischer Höhe vertikal ausrichten? das sich an die Breite anpasst, wenn die Größe des Browserfensters geändert wird, um ein quadratisches Seitenverhältnis beizubehalten?

Vertikal Ausrichtung

Um dies zu erreichen, können wir die folgende Technik anwenden:

1. Erstellen Sie ein Inline-Block-Pseudoelement: Als erstes (oder letztes) Kind des übergeordneten Divs wird ein Pseudoelement mit einer Höhe von 100 % generiert, das das gesamte übergeordnete Div einnimmt Höhe.
2. Vertikale Ausrichtung festlegen: Die Eigenschaft „Vertikale Ausrichtung“ wird sowohl auf das Pseudoelement als auch auf das Bildelement angewendet, um sie vertikal in der Mitte des Containers auszurichten.
3. Leerraum entfernen: Für das übergeordnete Element wird eine Schriftgröße von Null festgelegt, um den Leerraum zwischen dem Inline-Block zu entfernen Elemente.

Vorteile

• Der Container (übergeordnetes Div) kann dynamische Abmessungen haben, sodass sich seine Höhe zusammen mit der Breite ändern kann.
• Das Bild Die Abmessungen des Elements müssen nicht explizit angegeben werden.
• Diese Technik kann auch verwendet werden, um ein div-Element mit dynamischem Inhalt vertikal auszurichten, aber die Die Schriftgröße des Div muss zurückgesetzt werden, um den eingeschlossenen Text anzuzeigen.

Responsiver Container

Um einen responsiven Container zu erstellen, bei dem sich die Höhe an die Breite anpasst, können wir a anwenden Prozentwert für den oberen/unteren Abstand oder die Randeigenschaft.

Kombination von vertikaler Ausrichtung und Responsive Container

Um sowohl die vertikale Ausrichtung als auch einen reaktionsfähigen Container zu implementieren, können wir das Bildelement in ein Wrapper-Div mit absoluter Positionierung einschließen und es erweitern, um den gesamten Raum des Containers auszufüllen.

Codebeispiel

<div class="responsive-container">
  <div class="dummy"></div>

  <div class="img-container">
    <img src="...">
  </div>
</div>

.responsive-container {
  width: 60%;
  position: relative;
}

.dummy {
  padding-top: 100%; /* maintains 1:1 aspect ratio */
}

.img-container {
  text-align: center;
  font: 0/0 a;
}

.img-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container img {
  vertical-align: middle;
  display: inline-block;
}

Dieser Code zeigt, wie man ein Bild innerhalb eines responsiven Containers vertikal ausrichtet, wobei die Höhe des Containers je nach Verfügbarkeit angepasst wird Breite.

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein Bild vertikal in einem Div mit responsiver Größe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!