In the article https://blog.csdn.net/qq_44327851/article/details/135006421 , it is mentioned that pure JavaScript can be used to freely adjust the page size. There are basic versions and optimized versions. The optimized version solves the problem of the basic version by adding handles. There are other ways to solve the problem of not being flexible enough when adjusting the page size - jQuery and jQuery UI.
The following demonstrates how to implement controllable resizing function through jQuery: First, make sure to introduce jQuery and jQuery UI library files into your HTML page:
<!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> In this example, we use jQuery and the jQuery UI library to .resizable() make resizable an element with a class name resizable by calling a method. Some configuration options are also provided, such as whether to maintain aspect ratio, minimum width and height, maximum width and height, etc. This allows for more flexible control over resizing behavior and effects.