Wie kann man ein Bild in einem Div mit Responsive Height vertikal zentrieren?

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

In dieser Anleitung befassen wir uns damit, wie man ein Bild innerhalb eines Divs mit reaktionsfähiger Höhe vertikal ausrichtet .

Der Ansatz

Um eine vertikale Ausrichtung zu erreichen, verwenden wir Inline-Block-Elemente und Nutzen Sie CSS-Eigenschaften wie Position, Top, Höhe und Textausrichtung. So funktioniert es:

1. Erstellen Sie ein Pseudoelement

Fügen Sie ein Inline-Block-Pseudoelement als erstes untergeordnetes Element des Container-Div hinzu. Stellen Sie die Höhe auf 100 % ein, um die Höhe des Behälters auszufüllen.

2. Vertikale Ausrichtung

Setzen Sie die Eigenschaft „Vertical-Alignment“ sowohl für das Pseudoelement als auch für das Bild auf „Mitte“, um sicherzustellen, dass sie vertikal ausgerichtet sind.

3. Abstand entfernen

Um Leerzeichen zwischen dem Pseudoelement und dem Bild zu entfernen, setzen Sie die Schriftgröße des übergeordneten Divs auf 0, wodurch jeglicher Textinhalt ausgeblendet wird.

Implementierung

Bedenken das folgende HTML und CSS:

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

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

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

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

Die Ergebnis

Diese Technik ermöglicht die vertikale Ausrichtung des Bildes innerhalb des Containers unter Beibehaltung der reaktionsfähigen Höhe des Containers.

Max-Eigenschaften für Bildgröße

Um sicherzustellen, dass die Wenn das Bild die Größe des Containers nicht überschreitet, sollten Sie die Eigenschaften „max-height“ und „max-width“ für das Bild festlegen:

.img-container img {
  ...
  max-height: 100%;
  max-width: 100%;
}

Das obige ist der detaillierte Inhalt vonWie kann man ein Bild in einem Div mit Responsive Height vertikal zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!