Redimensionner une image en fonction de la quantité de texte

Bonjour
Je vous expose mon problème.
J'ai un code qui ressemble à ceci

<section style="height:100vh">
 <div class="text"><p>bla bla bla bla</p></div>
</div class="img"><img src="" />
</section>

J'ai section qui est défini à 100vh et je souhaiterai que la hauteur de mon image s'ajuste automatiquement en fonction de la quantité de texte afin que la section ne déborde pas .
est-ce réalisable juste en css ?
Merci pour votre aide

Tu peux déjà corriger ton code html pour les coupes de balises <div></div> bancales :

<section class="container">
      <div class="mon-texte">J'écris, donc je suis le curseur</div>
     <div class="mon-img"><img src="mon-image.jpg" alt="mon-image" /></div>
</section>

Après tu peux essayer ceci :

.container { display: flex; flex-direction: column; height: 100vh; }
.mon-img { flex-grow: 1; }
.mon-img img { max-height: 100%;  }

Je n'ai pas testé mais cela devrait marcher.

bazooka07 a écrit :
Tu peux déjà corriger ton code html pour les coupes de balises &lt;div&gt;&lt;/div&gt; bancales :

<section class="container">
     <div class="mon-texte">;J'écris, donc je suis le curseur</div>
    <div class="mon-img"><img src="mon-image.jpg" alt="mon-image" /></div>
</section>

Après tu peux essayer ceci :

.container { display: flex; flex-direction: column; height: 100vh; }
.mon-img { flex-grow: 1; }
.mon-img img { max-height: 100%;  }

Je n'ai pas testé mais cela devrait marcher.

en gros ça marche https://codepen.io/gc-nomade/pen/XPNWrv
Modifié par gcyrillus (29 Aug 2018 - 22:35)