CSS - Bild Höhe neben flexiblen Text Container anpassen, wenn Display schmaler wird

[ebody]

Mich würde schon interessieren, ob es für die Variante, wo das Bild als <img> Tag verwendet wird, eine Lösung gibt.

Mit einem Hintergrundbild klappt es schon mal.

<main>
  <section>
    <div class="img-box"></div>
    <div class="text-box">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus at
        reprehenderit dolorum modi accusamus, aliquam sapiente vero eum quidem
        dolores! Vitae tempora ipsa obcaecati possimus recusandae consequuntur
        nisi quis mollitia!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus at
        reprehenderit dolorum modi accusamus, aliquam sapiente vero eum quidem
        dolores! Vitae tempora ipsa obcaecati possimus recusandae consequuntur
        nisi quis mollitia!
      </p>
    </div>
  </section>
</main>

.img-box {
  background: url("https://cdn.pixabay.com/photo/2022/08/26/04/19/beach-7411683_960_720.jpg");
  background-origin: content-box;
  background-size: 462px auto;
  background-repeat: no-repeat;
  background-position: 0 0;
  grid-column: 2/3;
  height: 100%;
  min-height: 328px;
  max-height: 720px;
  width: 100%;
  overflow: hidden;
}

img {
  width: 462px;
}

Gruß ebody