在https://blog.csdn.net/qq_44327851/article/details/135006421文章中提到了用纯JavaScript实现自由调整页面大小的功能，其中有基础版和优化版，优化版通过添加手柄解决了基础版在调整页面大小的时候不够灵活的问题，其实解决不够灵活的问题还有其它办法——jQuery和 jQuery UI。
下面演示如何通过 jQuery实现可控制的调整大小功能：首先确保在您的 HTML 页面中引入 jQuery 和 jQuery UI 的库文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resizable Element</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.resizable {
width: 200px;
height: 200px;
background-color: lightgray;
border: 1px solid #ccc;
overflow: auto;
}
</style>
</head>
<body>
<div class="resizable">
<!-- 这里放置需要调整大小的内容 -->
</div>
<script>
$(function() {
$(".resizable").resizable({
aspectRatio: false, // 是否保持宽高比
minWidth: 100, // 最小宽度
minHeight: 100, // 最小高度
maxWidth: 400, // 最大宽度
maxHeight: 400 // 最大高度
});
});
</script>
</body>
</html> 在这个示例中，我们使用了 jQuery 和 jQuery UI 库，通过调用 .resizable() 方法来使具有 resizable 类名的元素可调整大小。同时还提供了一些配置选项，例如是否保持宽高比、最小宽度和高度、最大宽度和高度等。这样就能够更灵活地控制调整大小的行为和效果。