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

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!

  1. @@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 🖖

    --
    Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
  2. Hej Klaus,

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

    Dann suchst du vielleicht object-fit?

    Marc

    --
    Ceterum censeo Google esse delendam