Wie kann ich ein Div proportional mit einem Bild füllen und dabei das Seitenverhältnis beibehalten?

Ein Div proportional mit einem Bild füllen

In diesem Thread versucht ein Benutzer, ein Div mit einem Bild zu füllen und dabei das Seitenverhältnis beizubehalten , unabhängig von der Bildausrichtung. Der Überlauf des Div ist ausgeblendet, sodass das Bild möglicherweise zugeschnitten werden kann.

Um dieses Problem zu beheben, wird empfohlen, die Breiten- und Höhenattribute aus dem Bild zu entfernen, um das natürliche Seitenverhältnis beizubehalten. Flexbox kann dann verwendet werden, um das Bild innerhalb des Div zu zentrieren.

Hier ist ein CSS-Snippet, um dies zu erreichen:

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

Und ein entsprechendes HTML-Beispiel:

<div class="fill">
    <img src="https://picsum.photos/id/237/320/240" alt="" />
</div>

Diese Lösung nutzt Flexbox, um das Bild zu zentrieren und sicherzustellen, dass es das Div ausfüllt und seine Proportionen beibehält.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Div proportional mit einem Bild füllen und dabei das Seitenverhältnis beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!