flex vs. Positionserhebung - Brutalität PUR!

[Ja hallo, hier spricht der Max]

Hallo,

Folgender Irrsinn macht mir derzeit viel Freude:

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

#container {
	width: var(--auf-jeden-Fall-weniger-als-die-Bilddimensionen);
	height: var(--auf-jeden-Fall-weniger-als-die-Bilddimensionen);
	/*(...)*/
	display: flex;
	justify-content: center;
	align-items: center;
	
}
#container img {
	max-width: 100%;
	max-height: 100%;
}

Wenn ich mir nun die top - Werte der Elemente via der getBoundingClientRect() Methode gönne, und diese in der Konsole logge, spuckt mir diese für den top-Wert von img doch recht abenteuerliche Werte aus,

z.B. -- top für container: 8 -- vs. -- top für IMG: 208 --

...obwohl Bild, da ja größer als der Container, optisch oben bündig mit dem Container abschließt. Setze ich #container align-items auf flex-start, dann ergeben die top-Werte plötzlich Sinn i.e. sind identisch.

Was passiert hier hinter den Kulissen, warum und wie kann ich meinem Haus- und Hofbrowser das abgewöhnen?

Danke Max!

[Rolf B]

Hallo Max,

das liegt am SVG - warum genau, weiß ich auch nicht. Ich habe das mit dem Stadtwappen von Köln getestet, das beginnt so:

<svg xmlns="http://www.w3.org/2000/svg" width="638" height="625">

Und trotzdem tritt der von Dir genannte Effekt ein.

Aber vielleicht hilft ein Workaround. Was Du eigentlich willst, glaube ich, ist dies:

img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

Dann brauchst Du keine Flexbox. Und die Werte stimmen.

Rolf