CSS3에서 높이를 기준으로 배경의 배율을 조정하려면 어떻게해야합니까?

Question

커버를 사용하거나 'background-size'속성에 값을 포함 할 수 있다는 것을 알고 있지만 창 높이별로 배경을 스케일 할 수 있습니까?

나는 작동하지 않았다

background-size: auto contain 

background-size: cover contain 

모두

을 시도했습니다.

Answer 1

contain 및 cover 키워드는 자체적으로 사용하도록되어 있습니다. 배경 이미지의 너비 또는 높이에만 사용할 수 없습니다. 즉, 둘 중 하나를 함께 사용할 수 없습니다. 또한이 두 값은 항상의 가로 세로 비율에 따라 이미지의 크기를 조정합니다. 당신은 상자 내에서 (포함) 볼 전체 이미지를 유지하면서 이미지의 가로 세로 비율을 유지하는 것을 의미하는 경우

, 단지 그 자체로 contain을 지정

background-size: contain; 

하는 경우에만 배경 이미지의 원본을 유지하는 것을 의미하는 경우 너비와 높이를 이미지의 종횡비를 유지하지 않고 포함 된 상자와 함께 늘리면 픽셀의 너비와 높이의 100 %를 지정해야합니다.

그래서 200 개 픽셀 폭의 배경 이미지를 들어, 사용합니다 :

background-size: 200px 100%; 

이미지를 background-position 및 background-repeat 적절한을 제공하는 것을 잊지 마십시오.