Wie kann ich mithilfe von Flexbox dafür sorgen, dass ein Bild ein Div ausfüllt und gleichzeitig das Seitenverhältnis beibehält?

Proportionales Bildausfüllen eines Div

Ihr Ziel ist es, ein Div mit einem Bild zu füllen und dabei das Seitenverhältnis des Bildes beizubehalten. Im Gegensatz zu einem vorherigen Thread möchten Sie, dass das Bild unabhängig von der Ausrichtung immer das Div ausfüllt.

Lösung: Flexbox

Um dies zu erreichen, können wir CSS-Flexbox nutzen:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.container img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

Erklärung:

• Stellen Sie den Behälter auf div zum Anzeigen: Flexen und zentrieren Sie den Inhalt.
• Geben Sie „flex-shrink: 0“ für das Bild an, um zu verhindern, dass es verkleinert wird.
• Mindestbreite: 100 % und Mindesthöhe: 100 festlegen % um sicherzustellen, dass das Bild das ausfüllt div.

Beispiel:

<div class="container">
  <img src="some-image.jpg" alt="Could be portrait or landscape">
</div>

Das Ergebnis ist ein Bild, das das Div ausfüllt und dabei sein Seitenverhältnis beibehält. Ob im Hoch- oder Querformat, das Bild nimmt den gesamten Raum ein.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von Flexbox dafür sorgen, dass ein Bild ein Div ausfüllt und gleichzeitig das Seitenverhältnis beibehält?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!