Oxygen Image-Cards – absolute & relative positioning

 

Image width: 100%

Image height: 25 rem (oder beliebiger Wert)

CSS für das Image:

object-fit: cover;
object-position: 50% 50%;

Beim „object-position“ kann der Mittelpunkt des Bildes verschoben werden.

 

Absolute Positioning // „Layers“

Hier auch das o. g. CSS verwenden. 

Eine absolute DIV benötigt einen relative DIV als Elternteil.

Mit Z-Index kann man die Layer-Überlagerung bestimmen. NULL ist ganz unten.