Bild soll sich prozentual an Parent (ohne fixen Dimensionen) anpassen

[Klaus]

Hallo!

Ich habe folgende Problem:

Ich hätte gerne, dass sich ein Bild an seinen Container anpasst. Der Container soll sich vertikal über den verbleibenden Rest des Dokuments erstrecken (hier der Einfachheit halber über das gesamte vertikale Dokument, da ich weitere Elemente mal weggelassen habe). In dem Container befindet sich ein Bild, das sich an die Maße des Parent-Elements (Container) anpassen sollte, was es allerdings nicht tut (das Bild ist ein sehr großes SVG, welches sich aus irgendeinem Grund nicht anpasst, sondern ein overflow produziert).

Der Code bisher:

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
}
#container {
	flex: 1 0 auto;

}
#container img {
	max-width: 100%;
	max-height: 100%;
}

<div id="container"><img src="Vektorgrafik.svg" alt=""></div>

<!-- Bild sollte vertikal maximal der Fensterhöhe entsprechen -->

Danke für euren Rat!

[Gunnar Bittersmann]

@@Klaus

In dem Container befindet sich ein Bild, das sich an die Maße des Parent-Elements (Container) anpassen sollte

Das heißt, es soll horizontal anders skaliert werden als vertikal?

In Understanding SVG Coordinate Systems and Transformations (Part 1) schreibt Sara Soueidan übers preserveAspectRatio-Attribut.

Ich müsste aber auch erst ausprobieren, ob das so geht, wenn man das SVG per <img src="Vektorgrafik.svg" alt=""> einbindet.

Als Alternativtext kommt noch mehr als ein Leerstring?

LLAP 🖖

[marctrix]

Hej Klaus,

Ich hätte gerne, dass sich ein Bild an seinen Container anpasst.

Dann suchst du vielleicht object-fit?

Marc