Responsiv Image neben Text

[bobbix]

Hallo zusammen,

ich habe ein Bild, das links neben einem Text steht. Dieses Bild soll genauso hoch wie der Textblock daneben werden. Die Breite des Bildes soll sich proportional verkleinern bzw. vergrößern.

<div id="container">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/703971/bild-200.jpg">
    <div id="areaRight">bdffdgdfgdfg<br>sfsfsfssaf<br>sdfsdfsdfbdffdgdfgdfg<br>sfsfsfssaf<br>sdfsdfsdfbdffdgdfgdfg<br>sfsfsfssaf<br>sdfsdfsdfbdffdgdfgdfg<br>sfsfsfssaf<br>sdfsdfsdfbdffdgdfgdfg<br>sfsfsfssaf</div>
</div>

Ich habe es geschafft, dass sich das Bild an der Texthöhe anpasst, jedoch hat sich die Breite nicht verändert und proportional angepasst. In meinem Beispiel hätte das Bild bei einer Höhe von 180 Pixeln eine Breite von 240 Pixeln haben müssen.

Codepen

Vielen Dank vorab für Eure Hilfe.

Liebe Grüße

[gernotback]

Ich denke, dein Vorhaben kannst du nur mit JavaScript realisieren. Weise dem beides umgebenden Container per JS die Höhe des enthaltenen Textcontainers zu. Im CSS dann dem Bild Folgendes:

img {
  height: 100%;
  width: auto;
}

... , also genau anders herum.

[Matthias Apsel]

Hallo gernotback,

schön, nach so langer Zeit von dir zu lesen. Ich glaube, dein (vor-)letzter Beitrag war noch vor meiner Zeit.

Bis demnächst
Matthias

[bobbix]

Alles klar gernotback. Vielen Dank für Dein Feedback.