Wie kann ich das Bildseitenverhältnis in CSS Flexbox beibehalten und gleichzeitig eine flexible Höhe ermöglichen?

Beibehalten des Bildseitenverhältnisses mit flexibler Höhe

Im CSS-Flexbox-Modell werden Bilder oft gestreckt oder verkleinert, um die Breite ihres Containers auszufüllen . Das Beibehalten des Seitenverhältnisses beim Anpassen der Höhe kann eine Herausforderung sein. Um dieses Problem anzugehen, erkunden wir effektive Lösungen.

Eine Lösung ist die Verwendung der Objektanpassung für das Bildelement:

object-fit: contain;

Diese Eigenschaft weist den Browser an, das Bild im vorgesehenen Bereich einzuschließen unter Beibehaltung seiner Proportionen. Ein Live-Beispiel können Sie unter http://jsfiddle.net/ykw3sfjd/ ansehen.

Alternativ können bestimmte Flex-Eigenschaften verwendet werden:

align-self: center;
flex: 0 0 auto;

align-self stellt sicher, dass das Bild vertikal ist zentriert innerhalb des übergeordneten Elements, während flex: 0 0 automatisch das Wachstumsverhalten des Bildes steuert. Dadurch wird verhindert, dass sich das Bild auf die verfügbare Höhe ausdehnt, sodass das Seitenverhältnis erhalten bleibt.

Das obige ist der detaillierte Inhalt vonWie kann ich das Bildseitenverhältnis in CSS Flexbox beibehalten und gleichzeitig eine flexible Höhe ermöglichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!