Bild ausrichten per CSS

[Rolf B]

Hallo Gunnar,

TIL: Wikipedia vera...lbert uns. Als Bildquelle kann ich statt

src=".../thumb/1/1c/FuBK_testcard_vectorized.svg/320px-FuBK_testcard_vectorized.svg.png"

auch

src=".../thumb/1/1c/FuBK_testcard_vectorized.svg/320px-x.png"

schreiben. Ihn interessiert nur das 320px und die .png Endung. Und irgendwas mit /-.*/ dazwischen…

Zu deinem Pen:

• freut mich, dass ich mit meiner „Technik“ zum „Auskommentieren“ von Attributen nicht alleine bin 😉 (xwidth, xheight)
• statt justify-content und align-items könnte man auch die Shorthand-Eigenschaft place-content:center hinschreiben.

Und vielleicht sollte man auch gleich das SVG einbinden und nicht die PNG Vorschau?

  <img src="https://upload.wikimedia.org/wikipedia/commons/1/1c/FuBK_testcard_vectorized.svg"
       width="320" alt="Testbild" >

Äh. Ja. Das wollte ich gesagt haben. Bis ich sah, dass dieses dusselige SVG 121KB groß ist und das PNG nur 13,9KB. Weil das SVG kein echtes SVG ist, sondern ein Rasterbild als <image> enthält. Autsch 😕. Dann vielleicht lieber doch das Original mit Anti-PAL Testzeilen?

Rolf