大前提
・インライン要素には高さは指定できません。（幅も）
・子要素が親要素より大きい場合ははみ出ます。（親要素が広がる）
・設定値により基準があります。（vh,px,%,auto）
vh
・vhはビューポート(viewport)の略
・ビューポートとは、端末の表示領域のこと。画面を表示できる領域のことです。
ブラウザで言えば今あなたが見ているブラウザが表示できる範囲を言います。（PCブラウザなら可変です）
携帯端末だと固定になることが多いです。
・heightを100vhに設定すると高さは画面の高さいっぱいに設定されます。（逆に1を設定すればビューポートの1/100の高さになる）
・基準がビューポートになるため、親要素に影響されません。
%
・親の要素を基準として、その要素が何%の高さになるかを設定します。（親要素以外には影響されません。）
・親要素の高さがautoの場合は、%は聞きません。
auto
・heightを設定しない場合、autoがデフォルトで設定されます。
・ブラウザ側が自動で高さを設定します。（とは言え計算方法はあり、画像だとその画像の大きさ分になります）
その他備考（主に画像について）
img要素は例外
・img要素はインライン要素にも関わらず、高さ、幅が設定できます
・height:autoを設定した場合、幅(width)の値に応じて、横縦比を維持したまま高さが自動で決定されます。
画像が大きすぎて親要素より大きくなってしまう場合
・img要素に直接widthとheightを設定することが多いようです。
・外観を設定する場合はCSSでクラスを適用させるとかしましょう
おまけ
・画像を横にいい感じで並べたい場合、display:inline-blockでインラインブラック要素に変更し、object-fit:coverで指定した枠をはみ出た場合にはみ出た部分をトリミングするといい感じになります。
・更に疑似セレクタのhoverでマウスオーバー時にopacity:0.5をつけるとそれっぽくなります。