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

Ein Div mit einem Bild füllen und dabei die Proportionen beibehalten

Bei der Webentwicklung kann es vorkommen, dass Sie ein Bild innerhalb eines Div-Elements anzeigen müssen Dabei wird sichergestellt, dass das Seitenverhältnis des Bildes erhalten bleibt. Dies kann ein kniffliges Problem sein, aber eine Lösung liegt in der Kombination von CSS-Flexbox und sorgfältiger Bildgrößenanpassung.

Stellen Sie sich dieses Szenario vor: Sie haben ein div-Element mit einer festen Größe und einem Bild darin. Sie möchten, dass das Bild immer das Div ausfüllt, unabhängig davon, ob es sich um eine Quer- oder Hochformatausrichtung handelt. Diese Anforderung kann auch dann erfüllt werden, wenn das Bild abgeschnitten wird, weil das Div über den Satz „overflow:hidden“ verfügt.

Um diesen Effekt zu erzielen, führen Sie die folgenden Schritte aus:

• Entfernen Sie die Breite und Höhe Attribute aus dem Bild-Tag, um dessen Seitenverhältnis beizubehalten.
• Stellen Sie das div-Element so ein, dass es Flexbox mit Anzeige verwendet: Flex.
• Verwenden justify-content: zentrieren und align-items: zentrieren Sie das Div, um das Bild darin zu zentrieren.
• Fügen Sie „overflow: versteckt“ zum Div hinzu, um überschüssiges Bild abzuschneiden, das über seine Größe hinausgeht.
• Stilen Sie das Bild innerhalb des Div wie folgt:

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

• Der Flex-Shrink: 0 stellt sicher, dass das Bild schrumpft nicht, wenn das Div kleiner wird.
• Die Mindestbreite: 100 % und die Mindesthöhe: 100 % stellen sicher, dass das Bild immer mindestens so groß wie das Div ist.

Mit dieser Technik können Sie ein Div mit einem Bild füllen und dabei seine Proportionen beibehalten, unabhängig von seiner Ausrichtung.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Div 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!