divの高さを背景画像に自動的に合わせるにはどうすればよいですか？

Question

私はこのサイトの最初のセクションの効果を作成しようとしています： https://www.bandainamcoent.com/games/dragon-ball-fighterz#

DIVの高さは、背景画像は、その縦横比を維持するようにウィンドウのサイズを変更するに変更され、リンクが下部に位置しますのdivのはまだ見ている。

私の現在のアプローチは、サイズ変更時に背景画像の幅のみを調整します。私は高さがコンテンツに崩壊しないようにdivに設定された高さを持っています。しかし、背景画像が高さを決定するようにしたいと思います。

.landingPage { 
    position: relative; //<--This is only here for some absolutely positioned elements in the div 
    height: 950px; 
    width: 100%; 
    background-image: url(../assets/desktopLandingImage.jpg); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

Answer 1

要素を背景画像のサイズに基づいて展開することは不可能です。

これを解決するには、背景画像を子の<img>要素にすることをお勧めします。この<img>要素には、以前コンテナにあったwidthとheightの両方を指定します。完全にを親からのheightとを省略すると、親は自動的に画像のサイズに拡大されます。

これは、次の中で見ることができます。

.landingPage > img { 
 
    width: 100%; 
 
    height: 950px; 
 
}

<div class="landingPage"> 
 
    <img src="http://placehold.it/100"> 
 
</div>

は、この情報がお役に立てば幸い！