Responsive Bild

[Seraphius]

Guten Tag miteinander

Ich benötige eure fachkräftige Unterstützung.
Über Google habe ich keine passende Lösung erhalten :/

Die Situation sieht so aus:

• Bild mit 100% Breite
• Automatische Höhe
• Content soll sich der Höhe des Bildes anpassen (also wenn die Höhe des Bildes kleiner wird, soll der Content nach oben "rutchen"

Die Strukturierung bis jetzt:

<div id="cycle-wrapper">
    <div id="cycle">
        <img></img>
    </div>
</div>

Der CSS-Code:
#cycle-wrapper {
position: relative;
max-width: 100%;
}

#cycle {
width: 100%;
height: inherit;
}

#cycle img,
#cycle div {
max-width: 100%;
height: auto;
}


Die Website:

Wie Ihr seht, skaliert, das Bild in der Breite, da dies aber nicht proportional geschieht (höhe skaliert nicht mit), wird das Bild zusammengedrückt.

Ich hoffe, jemand von euch kann mir dabei helfen, dies zu beheben

[kissein]

#cycle{
position: relative;
width: 1382px;
height: auto !important;
padding-bottom: 50px;
}

<div id="cycle-wrapper">
    <div id="cycle">
        <div  style="display:block"><img></div> //erste bild
        <div  style="display:none"><img></div> //folge bilder

    </div>
</div>