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

So richten Sie ein Bild innerhalb eines Div mit flexibler Höhe vertikal aus

Problem:

Sie haben einen Div-Container mit eine reaktionsfähige Höhe, die sich proportional an Änderungen in der Breite anpasst. In diesem Container befindet sich ein Bild mit unterschiedlichen Höhen. Ihre Herausforderung besteht darin, das Bild unabhängig von seiner Höhe vertikal in der Mitte des Containers auszurichten.

Lösung:

Um eine vertikale Ausrichtung in dieser reaktionsfähigen Umgebung zu erreichen, führen wir ein ein innovativer Ansatz, bei dem ein Inline-Element neben dem Bild platziert wird.

Vertikal Ausrichtung:

1. Pseudoelement-Erstellung: Innerhalb des .img-Containers (der das Bild hostet) erstellen wir direkt ein (Pseudo-)Element auf Blockebene vor dem Bild.
2. Höhenanpassung: Dieses Pseudoelement wird vertikal erweitert, um alle verfügbaren Elemente zu verbrauchen Höhe, wodurch eine Höhe von 100 % erzwungen wird, die der Höhe des Containers entspricht.
3. Vertikale Ausrichtung von Elementen: Sowohl das Pseudoelement als auch das Bild gewinnen an Vertical-align: middle; Styling, um die richtige Ausrichtung innerhalb der Zeile sicherzustellen.
4. Entfernung der Schriftgröße: Um jegliche Leerräume zwischen diesen Elementen zu entfernen, legen wir die Schriftgröße auf 0; auf dem übergeordneten Container.

Vorteile dieses Ansatzes:

• Dynamische Containerabmessungen
• Automatische Bildausrichtung ohne explizite Höhenangaben
• Vielseitigkeit bei der Ausrichtung anderer Elemente, z. B. Divs mit variablem Inhalt (Schriftgröße anpassen). zurück zum Anzeigetext)

Responsiver Container:

Um die Höhe des Containers mit seiner Breite flexibel zu gestalten, verwenden wir Prozentwerte für die padding-top-Eigenschaft:

• 100 % Polsterung oben: Erzeugt ein Quadrat mit gleicher Höhe und Breite
• Höher Prozentwerte (z. B. 150 % oder 200 %): Höhe ist ein größerer Prozentsatz der Breite

Diese Fülltechnik kann auch auf untergeordnete Div- oder CSS-Pseudoelemente angewendet werden.

Inhaltsplatzierung:

Die Polsterung oben schafft übermäßig viel Platz über und/oder unter dem Inhalt innerhalb des Behälter. Um dieses Problem zu lösen, schließen wir den Inhalt in ein Wrapper-Element ein:

• Absolute Positionierung: Entfernt den Wrapper aus dem normalen Dokumentenfluss, sodass er den gesamten Raum des Containers ausfüllen kann.
• Oben , rechte, untere und linke Eigenschaften: Erweitern Sie den Wrapper, um die Abmessungen des Containers abzudecken.

Final Umsetzung:

Durch die Kombination dieser Techniken erreichen wir unser Ziel:

<div class="responsive-container">
  <div class="dummy"></div>
  <div class="img-container">
    <img src="image.jpg" alt="Image">
  </div>
</div>

.responsive-container {
  width: 60%;
  height: 300px;  /* Example height for demo purposes */
  position: relative;
}

.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;
  max-height: 100%;  /* Optional: Ensures image stays within container */
  max-width: 100%;   /* Optional: Ensures image stays within container */
}

Demonstration:

[Bild vertikal ausrichten in Responsive Div](https://codepen.io/cristianorocha/pen/dywbQMV)

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!