Container mit Bild und variabler Höhe

Container mit einem festen Seitenverhältnis, welcher aber in der Größe (Höhe) dynamisch (in Abhängigkeit der prozentualen Eingabe) ist.
Bild befindet sich im Container und ist absolut positioniert.

Ein padding-top: 100% würde ein quadratisches Bild voraussetzen.
Bei Querformat muss das Seitenverhältnis berücksichtigt werden!

div.wrapper {
        position: relative;
        padding-top: 100%;
}
img {
        position:absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
}

Thursday, 07. September 2023 - 10:38