背景画像の表示の仕方について

ウインドウの角にマウスポインタを置き、ウインドウを広げたり縮めたりすると、背景画像が全て映ったり、下のほうが切れたりします。

background-size: contain;で表示したところ、containerの中に表示したい画像が全て入りましたが、画面右のほうが空白・余白ができてしまいました。

Q:どのように設定したら、背景画像が空白なく・container全体に・画像のすべてが映り・ウインドウの大きさを変えても画像は動かず（切れたり伸びたりしない）にできますか。

ご回答よろしくお願いします。

HTML

CSS
.top-wrapper {
width: 100%;
height: 500px;
background-image: url(file:///C:/Users/%E6%AC%A1%E4%BA%95%E6%B8%89/Pictures/Blog%20%E5%86%99%E7%9C%9F%E7%B4%A0%E6%9D%90/IMG_1204.JPG);
background-size: cover;
background-repeat: no-repeat;
color: black;
opacity: 0.7;
}

行動規範の内容に同意します

回答1件

どうしてもbackgroundで画像を挿入したい場合は無理やり高さを計算してその分の余白を作るしかありません。calc関数は使わずに自分でパーセンテージを計算してもらっても構いません。

css
1.top-wrapper {
2width: 100%;
3background: url() 0 0 no-repeat;
4padding-top: calc(100%* imgHeight / imgWidth );
5background-size: 100% auto;
6color: black;
7opacity: 0.7;
8}