클릭 가능한 이미지 비늘

Question

벽화가 배경 인 페이지를 만들려고합니다. 벽화의 특정 부분을 클릭하면 다른 일이 일어납니다.

다른 브라우저/화면/장치 크기를 고려하여 벽화의 너비가 너비보다 큽니다. 그래서 이미지를 항상 브라우저 너비로 설정합니다. 벽화의 모든 부분에 클릭 가능한 요소가 있으므로 세로로 스크롤해야합니다.

나는 다양한 CSS 스타일을 시도했으며 이미지를 수평으로 확장 할 수는 있지만 이미지 크기를 수용하기 위해 수직으로 스크롤 할 수는 없습니다. 이미지 스케일링이 완료되면 이미지 크기/%를 기준으로 클릭 가능한 요소를 구현할 수 있습니다.

누구든지 의견이 있거나 올바른 방향으로 나를 가리킬 수 있습니까?

* EDIT 죄송합니다. 현재 사용하고있는 CSS를 넣지 않아 죄송합니다.이 제품을 만들 때 조금 피곤했습니다. 일부 코드

html { 
    background-image:url('1.jpg'); 
    background-repeat:no-repeat; 
    background-attachment:absolute; 
    background-size:cover; 
} 

Answer 1

.grow { transition: all .2s ease-in-out; } 
.grow:hover, .focus { transform: scale(1.1); } 

또는

$('.grow').on('click',function(){ 
    $(this).css({ 
      'transition': 'all .2s ease-in-out', 
      'transform': 'scale(1.1)' 
    }); 
});