Bilder zentrieren und Größe anpassen

5/1/2019

In der Vergangenheit war es etwas umständlich Bilder über CSS zu zentrieren und bei kleinen Endgeräten zu skalieren. Konstrukte mit display:block, position:relative oder max-width waren die Folge. Ich verwende mittlerweile diese CSS-Zeile dafür wenn die Bilder nicht zu groß sind.

display:flex;
width: echteBreiteInPixel;
height:auto;
justify-content:center;
align-items:center;

Für große Bilder empfiehlt es sich mit Media-Queries und srcset zu beschäftigen. Eine sehr gute Anleitung befindet sich hier:
https://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/


Kategorien: CSS