jQuery UI Resizable（缩放）实例
jQuery UI 的Resizable交互允许用户通过鼠标拖动元素边角或边框来改变元素大小。常用于实现可调整大小的窗口、面板、分栏布局、图片预览等。
推荐查看官方演示：https://jqueryui.com/resizable/
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1.基础缩放示例
最简单的可缩放元素，默认显示所有方向的手柄（e、s、se 等）。
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI Resizable 基础示例</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-3.6.0.min.js"></script><scriptsrc="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script><style>#resizable{width:200px;height:150px;padding:20px;background:#2196F3;color:white;text-align:center;}</style></head><body><divid="resizable"class="ui-widget-content">拖动边角或边框缩放我！</div><script>$(function(){$("#resizable").resizable();});</script></body></html>2.指定手柄与限制（handles、min/max、aspectRatio）
handles: "se"：只显示东南角手柄。minWidth/minHeight和maxWidth/maxHeight：限制最小/最大尺寸。aspectRatio: true：保持宽高比例（适合图片）。
<divid="resizable2"class="ui-widget-content">保持比例缩放（仅东南角）</div><style>#resizable2{width:300px;height:200px;background:#4CAF50;padding:20px;}</style><script>$("#resizable2").resizable({handles:"se",// 只东南角手柄minWidth:100,minHeight:80,maxWidth:500,maxHeight:400,aspectRatio:true// 保持宽高比});</script>3.视觉效果（ghost、animate、containment）
ghost: true：缩放时显示半透明“幽灵”副本，原元素不动直到结束。animate: true：缩放结束时动画过渡。containment: "parent"：限制缩放在父容器内。
<divstyle="width:600px;height:400px;border:2px solid #000;position:relative;padding:20px;"><divid="resizable3">幽灵 + 动画效果（限制在容器内）</div></div><style>#resizable3{width:200px;height:150px;background:#FF9800;}</style><script>$("#resizable3").resizable({ghost:true,// 幽灵效果animate:true,// 动画过渡containment:"parent",// 限制在父容器handles:"all"// 所有方向手柄});</script>4.事件回调（resize、start、stop）
监听缩放过程，实时获取尺寸或执行逻辑。
<divid="resizable4">实时显示尺寸</div><p>当前尺寸:<spanid="size">200 x 150</span></p><script>$("#resizable4").resizable({resize:function(event,ui){$("#size").text(ui.size.width+" x "+ui.size.height);},start:function(){console.log("开始缩放");},stop:function(){console.log("停止缩放");}});</script>Resizable 常与 Draggable 结合实现可拖动可缩放的窗口，或用于布局分栏（结合 resize 事件调整相邻元素）。如果你需要与 Draggable 结合的模态窗口示例、同步缩放多个元素，或网格对齐（grid）效果，请提供更多细节！
