Wie richtet man Bilder in Containern mit dynamischer Größe vertikal aus?

Bilder in Containern mit dynamischer Höhe vertikal ausrichten

Problem: Wie kann man Bilder in reaktionsfähigen Containern, deren Höhe vertikal ausgerichtet ist? werden vom Browser anhand ihrer ermittelt Breite?

Lösung:

1. Verwenden von Inline-Elementen für die vertikale Ausrichtung:

Um Inline-Elemente innerhalb eines übergeordneten Elements vertikal auszurichten, erstellen Sie ein (Pseudo-)Element auf Blockebene als erstes untergeordnetes Element und legen Sie seine Höhe auf 100 % seines übergeordneten Elements fest . Wenden Sie außerdem vertical-align: middle auf das Pseudoelement und das Zielbildelement an.

2. Vorteile:

• Dynamische Containerabmessungen werden unterstützt.
• Bildabmessungen müssen nicht explizit angegeben werden.
• Kann zur Inline-Ausrichtung oder div Elemente vertikal, mit der Option, die Schriftgröße für zurückzusetzen div Elemente zur Anzeige ihres Inhalts.

3. Responsiver Container mit vertikaler Bildausrichtung:

Um einen responsiven Container mit einer Höhe zu erstellen, die sich an seine Breite anpasst, verwenden Sie einen Prozentwert für die Eigenschaft

padding-top.

4. Inhalte zum Responsive Container hinzufügen:

Verwenden Sie ein Wrapper-Element innerhalb des Responsive Containers, um den Inhalt unterzubringen. Positionieren Sie die Hülle absolut und erweitern Sie sie, um den Raum des Behälters auszufüllen.

HTML-Code:

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

CSS-Code für vertikale Ausrichtung:

.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;
}

CSS-Code für Responsive Behälter:

Das obige ist der detaillierte Inhalt vonWie richtet man Bilder in Containern mit dynamischer Größe vertikal aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!