Bilder proportional skalieren und vertikal mittig ausrichten - knifflig


(Jan Jentsch) #1

Ich möchte ein Bild über die unterschiedlichen Breakpoints proportional skalieren. Das ist ja an sich eigentlich nicht schwer, aber jetzt kommts!
Der “Rahmen”, in den das Bild geladen wird soll eine max. Höhe bei der Desktopdarstellung von 300px haben. In der Mobildarstellung aber nicht höher als 280px sein. Dabei soll das Bild vertikal im “Rahmen” zentriert werden und kann somit oben und unten abgeschnitten werden (nicht schlimm).
Hinzu kommt für mich erschwerend, dass die Dimensionen des Bildes nicht ausreichen, um in der Horizontalen bis an den Rand zu gehen, wenn ich z. B. die Seite auf einem 30" Bildschirm darstelle. Das Bild müsste also - unberücksichtigt der Auflösung - größer gezoomt werden als das Original.

Wie stelle ich das am besten an? Zum besseren Verständnis habe ich eine Skizze gemacht:

Danke für eure Hilfe.
Jan


(Jan Jentsch) #2

Ok, das mit den Dimensionen des Bildes inkl. der max-min-height habe ich mit dem Graphic-Stack hinbekommen. jetzt fehlt mir im Prinzip das vertikale Ausrichten des Bildes im Stack.


(Jan Jentsch) #3

Ich habe es herausgefunden. Mit dem Jack-Stack komme ich nun endlich ans Ziel. Es ist genau so, wie ich es haben wollte - perfekt!

Hat sich also erledigt.

Gruß
Jan