background-imageを横幅一杯に表示し、高さは自動調整する方法

div要素(class名:test1)のbackground-imageを画面横幅一杯に合わせ、高さは画像の縦横比を維持するように自動調整して表示したいのですが上手くいきません。
下記コードのようにheight指定すれば表示はされるのですが、成り行きの画像高さと指定した高さの差分だけ無駄なスペースが出来てしまいます。

CSS
1.test1 {
2  background-image: url(../img/bg.png);
3  background-size: 100%;
4  height: 800px;
5  background-repeat: no-repeat;
6}
7

maisumakun

2020/01/24 01:57

> 高さは画像の縦横比を維持するように自動調整して表示したい背景の高さでしょうか、div自体の高さでしょうか。

tomo.i

2020/01/24 02:28

div自体の高さです。質問記載のコード height: 800px; のように、div高さ設定を画像に対して、十分に大きく取っておけば、画像は切れることなく表示されますが、余ったスペースが背景画像の下に残ってしまいます。 div高さを背景画像の高さ(画面サイズと画像縦横比で決まる)に合わせたいです。