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:

padding-top.

4. Inhalte zum Responsive Container hinzufügen:

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!