Heim >Web-Frontend >CSS-Tutorial >Wie behalte ich das Bildseitenverhältnis in Flexbox bei?

Wie behalte ich das Bildseitenverhältnis in Flexbox bei?

DDD
DDDOriginal
2024-12-17 19:01:14446Durchsuche

How to Maintain Image Aspect Ratio in Flexbox?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn