우선, Hammer.js를 HTML 문서에 추가해야 합니다. <script> 태그를 사용하여 Hammer.js를 추가하고, 이미지의 ID나 클래스를 이용하여 해당 이미지 요소를 선택합니다.

<script src="https://hammerjs.github.io/dist/hammer.js"></script>

<!-- 이미지 요소 -->
<img id="zoomImage" src="이미지 URL" alt="Image">

다음으로, JavaScript 코드를 사용하여 Hammer.js를 초기화하고 이미지 요소에 확대/축소 기능을 추가합니다. Hammer.js의 Pinch 이벤트를 사용하여 핀치 동작으로 이미지를 확대/축소할 수 있습니다.

var zoomElement = document.getElementById('zoomImage');
var hammer = new Hammer(zoomElement);

var initialScale = 1;
var currentScale = initialScale;

hammer.get('pinch').set({ enable: true });

hammer.on('pinch', function(event) {
  var newScale = currentScale * event.scale;
  zoomElement.style.transform = 'scale(' + newScale + ')';
});

위의 코드에서는 zoomElement 변수를 사용하여 이미지 요소를 지정하고, Hammer.js에 대한 인스턴스를 만듭니다. initialScale과 currentScale 변수를 사용하여 이미지의 초기 확대/축소 배율과 현재 배율을 저장합니다.

그런 다음 hammer.get('pinch').set({ enable: true }) 코드를 사용하여 핀치 이벤트를 활성화합니다. 이제 hammer.on('pinch', function(event) { ... }) 코드를 사용하여 핀치 이벤트가 발생할 때마다 이미지 요소의 크기를 변경합니다. event.scale 값을 이용하여 현재 배율에 핀치 이벤트의 스케일 값을 곱하여 새로운 배율을 계산합니다.

이렇게 하면 Hammer.js를 사용하여 이미지의 확대/축소 가능한 크기 변경 범위를 제어할 수 있습니다. 코드를 수정하여 추가 기능을 구현하거나 이미지 요소의 스타일을 변경할 수도 있습니다.