I'm trying to create a div with four divs that can be resized on drag from the corners in the center of the parent div while maintaining their aspect ratio. In addition to this I want the child divs to always fit within the parent, i.e. when one child is enlarged the others are made smaller to fit within the parent. Image explaining what I want
Here is my code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Resize</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
#container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 2px;
border: 10px #333 solid;
justify-content: center;
width: 1000px;
height: 758px;
}
.resizable {
justify-items: stretch;
border: 2px solid navy;
aspect-ratio: 1000/758;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<div id="container">
<div class="resizable" ></div>
<div class="resizable" ></div>
<div class="resizable" ></div>
<div class="resizable" ></div>
</div>
<script>
$( function() {
$( ".resizable" ).resizable({
containment: "#container",
});
} );
</script>
</body>
</html>