background-imageの縦幅を可変させたい

Question

空要素にbackground-imageを指定しています。
heightで絶対値を指定しないと表示されないので指定していますが
その状態で画面幅が狭くなった時に横幅と同様に縦幅もサイズを縮めることはできないのでしょうか。
色々試してはみたのですが自分の力では無理でした。

<div class="main-bgi"></div>

また、できないとして何か改善策があればご教示いただきたく
よろしくお願いいたします。

Answer 1

こちらで実装できると思います。

.main-bgi {
  max-height: 100vh; /* 画面の高さの100% */
}