background-imageを使う場合に、ウィンドウサイズによって高さを変える

background-imageで画像を表示させる場合、その要素の幅・高さを指定する必要があると思います。

widthやheigthが決まっている場合はbackground-sizeで対応できると思いますが、例えば画面いっぱいに広がるような画像の場合、アスペクト比を保とうとするとウィンドウサイズによって高さが変わってしまうのであらかじめ指定するのは難しいと思います。

その為、動的に高さを計算したいと思います。

計算式

(画像の横幅 / 画像の高さ) * ウィンドウに対する割合(vw)

ウィンドウに対する割合はvwの単位を使います

高さ/横幅とすることで、横幅に対する高さの割合が出ます。

その割合に対してウィンドウサイズを乗算します。

ウィンドウサイズはvwを使う事で、動的な値を得ることが出来ます。

具体例

/*CSS*/

/*640×427の画像があり、ウィンドウいっぱいに表示させたいとき*/

height:calc(427 / 640 * 100vw);

以上です。

ご依頼はこちらから。