Wie behalte ich das Bildseitenverhältnis in Flexbox bei?

Beibehalten des Bildseitenverhältnisses in Flexbox

In einem Flexbox-Layout neigen Bilder dazu, sich überproportional zu dehnen oder zu verkleinern, um die Breite des Containers auszufüllen. Um das Seitenverhältnis beim Anpassen der Bildhöhe beizubehalten, ziehen Sie die folgenden Lösungen in Betracht:

Option 1: object-fit

Fügen Sie die Eigenschaft „object-fit“ zum Bild hinzu:

img {
  object-fit: contain;
}

Dadurch wird sichergestellt, dass das Bild seine Abmessungen behält, während es in den Container passt.

Option 2: Flexbox-Regeln

Verwenden Sie die folgenden Flexbox-Eigenschaften für das Bild:

img {
  align-self: center;
  flex: 0 0 auto;
}

• align-self: center richtet das Bild vertikal innerhalb des Containers aus.
• flex: 0 0 verhindert automatisch, dass sich das Bild entlang der Flex-Achse ausdehnt oder schrumpft (d. h. vertikal).

Live-Beispiel:

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

.slider img {
  margin: 0 5px;
}

/* Option 1: object-fit */
.img-contain {
  object-fit: contain;
}

/* Option 2: Flexbox Rules */
.img-flex {
  align-self: center;
  flex: 0 0 auto;
}

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