画像の高さを親要素の残りの高さに合わせる

画像の大きさを親要素の残りの残りの高さに合わせて自動で縮小したいです。
方法はある程度問いませんが、特殊な条件なのもあってどうしたらいいか迷っています。

現状の説明をします。
親要素のdivの中に子要素のdivがあり、子要素のdivの中にテキストや画像などのインライン要素が入っています。
body部分は別のプログラムから自動生成されます。

cssにて子要素を余白も含めてブラウザの表示領域と一致させます。
つまり子要素の中身が大きかったとしても、スクロールバーが表示されない状態です。
合わせてスクロールバーを非表示、スクロールを禁止します。
余白はpaddingにて上下左右10%ずつ取り、コンテンツの大きさが表示領域の80%になるようにします。

htmlの全体は以下のような感じです。

<!DOCTYPE html>
<head><meta charset="utf-8"><style type="text/css"> <!--
html{
 overflow: -moz-scrollbars-none;
 overflow: hidden
}
body{margin: 0}
body::-webkit-scrollbar {display:none}
.parent {position: relative}
.child {
 position: absolute;
 padding: 5vh 5vw;
 width: 90vw;
 height: 90vh;
}
img{
 max-width: 100%
}
--></style></head>
<body>
 <div id="parent" class="parent">
  <div id="p0005" id="child" class="child">
   <p>ああああああああああああああああああ</p>
   <p><img src="https://bit.ly/2qzwuIF"></p>
  </div>
 </div>
</body>
</html>

このとき子要素の中身の高さが大きいまたはブラウザサイズが小さいと、
当たり前ですが、子要素のコンテンツ高さ80vhを超えてしまいます。
そのため子要素の高さをはみ出してしまいます。

テキストは仕方ないとして、画像を子要素からはみ出さない高さに自動で縮小したいです。

スぺニットだとわかりずらいので別サイトを https://app.netlify.com/ をつかって用意しました。https://serene-neumann-f8ba03.netlify.com/
スぺニットを実行→最大化でも正しく動作しました。
ウィンドウサイズをぐりぐりいじったとき、
画像が親要素をはみ出さ自動で縮小されるようにしたいです。

できないこと

htmlの中身の構造の変更
サイズの直接指定（ブラウザの表示領域基準でサイズを合わせる必要がある）

できること

cssを変える
javascriptを仕込む
- ただしオンラインが必要なcdnなどのサービスは不可
- minifyして動くならば仕込むことは可能

具体的な手段はわかりませんが、私がとりあえず考えた方法としては、
ページ内の画像が複数枚ある場合を想定して、
画像を除いたテキストの高さを何らかの方法で取得して、
親要素の高さから引いて残りの高さを計算、縦に並ぶ画像の枚数で割り、
画像の高さを書き換えるというものです。

こういったことができるのかも合わせて教えていただけると幸いです。

よろしくお願いします。