0

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>
Thea
  • 1
  • 1
  • Please share your code as well to have a clear idea about your issue – amel Feb 17 '23 at 14:51
  • 1
    Hi Thea, welcome to SO! Without a [reprex] there's little people on SO can do for you, code won't be written from scratch. However, [this SO Answer](https://stackoverflow.com/a/74779477) might give you some clues. – Rene van der Lende Feb 17 '23 at 15:03
  • This is not as easy as simply using the `resize` property and go for it. Before *any* resize of an element has taken place, elements nicely stick together when just one gets resized. Once an element has been resized, the browser remembers its size and the automatic sicky resize no longer works. To have resizable, magnetic elements, you will need to resort to Javascript. Once you go down that path, you might be better off searching online for existing solutions. Here are a few: [cssscript: JavaScript & CSS resize](https://www.cssscript.com/tag/resize/). – Rene van der Lende Feb 17 '23 at 17:23
  • 1
    @RenevanderLende thank you, that explains a lot. I'll have a look at the link you sent, hopefully I'll be able to figure something out :) – Thea Feb 19 '23 at 13:27
  • Searching Codepen for *splitter* will give you a vast list of ode examples, many using frameworks/libraries and/or vanilla JS. – Rene van der Lende Feb 19 '23 at 13:57

0 Answers0