div의 높이를 배경 이미지에 자동으로 맞추는 방법은 무엇입니까?

Question

가이 사이트의 첫번째 부분의 효과를 만들려고하고 : https://www.bandainamcoent.com/games/dragon-ball-fighterz#

사업부의 높이가 배경 이미지 종횡비를 유지하도록 창의 크기를 변경하고, 링크가 아래쪽에 위치 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>

희망이 도움이!