Wie behalte ich das Bildseitenverhältnis in CSS Flexbox bei?

Aufrechterhaltung des Bildseitenverhältnisses in Flexbox

Die Beibehaltung der Bildproportionen bei der Größenänderung der Höhe kann im CSS-Flexbox-Modell eine Herausforderung sein. Es stehen jedoch mehrere Methoden zur Verfügung, um dies zu erreichen.

Object-Fit-Eigenschaft

Ein Ansatz besteht darin, die Object-Fit-Eigenschaft für das Bild zu verwenden. Durch Festlegen von „object-fit: include“ wird das Bild so skaliert, dass es in seinen Zielcontainer passt, während sein Seitenverhältnis erhalten bleibt.

Flex-spezifische Regeln

Eine weitere Option ist So verwenden Sie Flex-spezifische Regeln:

• Setzen Sie align-self: center, um das Bild innerhalb seines übergeordneten Bilds vertikal zu zentrieren Container.
• Flex einstellen: 0 0 auto, um die Breite und Höhe des Bildes flexibel zu machen, sodass es nach Bedarf verkleinert oder erweitert werden kann.

Beispiel

Hier ist ein Beispiel, das beide Methoden demonstriert:

<div class="slider">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>

.slider {
    display: flex;
    height: 200px;
}

.slider img {
    margin: 0 5px;
    object-fit: contain;
}

/* Alternative Flex-Specific Rules */
.slider img {
    align-self: center;
    flex: 0 0 auto;
}

Diese Methode sollte effektiv sein Behalten Sie die Bildseitenverhältnisse bei, auch wenn Sie deren Höhe anpassen.

Das obige ist der detaillierte Inhalt vonWie behalte ich das Bildseitenverhältnis in CSS Flexbox bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!