배경 크기를 사용할 때의 CSS 높이

Question

background-size: contain을 사용하여 div의 배경 이미지 크기를 조정하고 width을 100 %로 설정했습니다. 화면의 크기가 가변적 인 모바일 사이트에이 기능이 필요합니다. 그러나 나는 높이를 설정할 때 딜레마가있다.

높이를 픽셀 단위로 설정하면 그림이 작아지면 그림 아래에 빈 공간이 남습니다.

높이를 설정하지 않으면 그림이 전혀 나타나지 않습니다.

가장 좋은 해결책은 무엇입니까? 여기

내 코드입니다 :

<div id="container"> 
    <p>Some text</p> 
    <div id="my-picture"></div> 
</div> 

CSS :

#container { 
    width: 100%; 
} 
#my-picture { 
    background:url(somepic.jpg) no-repeat; 
    background-size: contain; 
    height: ??? 
} 

Answer 1

당신이 배경 사이즈 사용해야 W3Schools에 따르면 커버;

#my-picture { 
    background:url(somepic.jpg) no-repeat; 
    background-size: cover; 
    height: ??? 
}