큰 이미지 스프라이트를 작은 div에 배치하고 창 크기에 따라 조정하십시오.

Question

.icon-parkfinder_1 { 
    background-image: url(../images/sprites.png); 
    background-position: -1080px 0px; 
    width: 1080px; 
    height: 1920px; 
} 

큰 이미지 스프라이트가 있고 작은 div에 배치했습니다. 나는 그것이 반응하기를 기대한다. 그러나 그것은 작동하지 않았다. 'div'가 이미지에 맞게 스타일을 조정하고 창 크기 조정에 맞춰야합니다.

Answer 1

다음 코드는 페이지 크기에 맞게 이미지를 제공합니다.

.icon-parkfinder_1 { 
    background-image: url(../images/sprites.png); 
    max-width: 1080px; 
    width: 100%; 
    height: 1920px; 
    background-repeat: no-repeat; 
    background-size: 100%; 
} 

Answer 2

div에 배경 크기 : 표지를 추가 할 수 있습니다.

.icon-parkfinder_1 { 
    background-image: url(../images/sprites.png); 
    width: 1080px; 
    height: 1920px; 

    background-size: cover; 
    background-position: center; 
}