Jquery Mobile是一個基于Jquery的開源移動網頁開發框架，它通過簡單易用的接口和高效的編程方式，為開發者提供了一種非常方便快捷的方式來構建流暢、響應式的移動網站和web應用。

在Jquery Mobile中，圖片縮放是一個非常重要的應用場景。如果我們需要在移動設備上顯示一些高清晰度的圖片，可能會引起頁面過于擁擠，影響用戶閱讀體驗。這時，我們就可以通過圖片縮放的方式，將圖片尺寸調整到合適的大小，并且可以方便地讓用戶進行放大或縮小操作。

<!-- HTML部分 -->
<div class="ui-content">
<img src="image.jpg" alt="image" id="image" width="100%">
</div>
<!-- JS部分 -->
<script>
$(document).on("pagecreate","#page",{ 
var initScale = 1;
var minScale = 0.2;
var maxScale = 2;
var wheelDelta = 10;
$("#image").on("touchstart", function(e){
if(e.originalEvent.touches.length == 2){
initScale = ($(this).width() / $(this).parent().width() + $(this).height() / $(this).parent().height()) / 2;
}
});
$("#image").on("gesturechange", function(e){
var scale = initScale * e.originalEvent.scale;
var newWidth = $(this).parent().width() * scale;
var newHeight = $(this).parent().height() * scale;
if(scale >minScale && scale< maxScale && newWidth >$(this).width() && newHeight >$(this).height()){
$(this).width(newWidth);
$(this).height(newHeight);
}
});
$("#image").on("gestureend", function(e){
initScale = $(this).width() / $(this).parent().width() + $(this).height() / $(this).parent().height()) / 2;
});
$("#image").on("mousewheel",function(e){
e.preventDefault();
if(e.originalEvent.wheelDelta / wheelDelta< 0){
if($(this).width() >$(this).parent().width() * minScale && $(this).height() >$(this).parent().height() * minScale){
$(this).width($(this).width() * (1 - 1 / minScale));
$(this).height($(this).height() * (1 - 1 / minScale));
}
}
else{
if($(this).width()< $(this).parent().width() * maxScale && $(this).height()< $(this).parent().height() * maxScale){
$(this).width($(this).width() * (1 + 1 / maxScale));
$(this).height($(this).height() * (1 + 1 / maxScale));
}
}
});
});
</script>

這里，我們通過注冊touchstart、gesturechange、gestureend和mousewheel事件來對圖片進行操作。其中，touchstart事件用于初始化縮放比例，gesturechange事件用于響應縮放手勢，gestureend事件用于釋放縮放比例，mousewheel事件用于響應鼠標滾輪操作。在這些事件中，我們實現了對圖片縮放比例、寬度和高度的動態調整。

通過這種方式，我們可以在Jquery Mobile中實現圖片縮放的功能，同時保證用戶體驗和交互性，在移動設備上能夠得到更好的呈現效果。