javascriptjquerycssjquery-uijquery-ui-resizable

Resizing by mouse the rest of images in a row after resizing a one, and keep ratio


I am using jQuery ui Resizable

After the resizing, all images should update both: their height and their width. But for the images that are not actually resized by a user, only the height is being updated. So the images are getting distorted. How to improve my code to maintain the ratio of all images while resizing?

* {
  margin: 0;
  padding: 0;
}
.outer {
  border: red dashed 2px;
  position: relative;
}
.ui-wrapper, .member {
  display: inline-block;
  object-fit: cover;
}
.member, .ui-wrapper {
  width:auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="outer">
  <img class="res image member" src="https://via.placeholder.com/150x50" alt="" />
  <img class="res image member" src="https://via.placeholder.com/100x50" alt="" />
  <img class="res image member" src="https://via.placeholder.com/100x50" alt="" />
</div>
<script>
$(".res").resizable({
    aspectRatio: true,
    ghost: true,
    stop: function( event, ui) {
  height=ui.size.height;
  $(".ui-wrapper, .member").height(height + "px");
}});
</script>

EDIT

Code Snippet doesn't work, so I add a screenshot before and after the resizing:

enter image description here

After the resizing of the middle image:

enter image description here

EDIT2

And a demo:

https://codepen.io/trzczy/pen/PozyVjV


Solution

  • * {
      margin: 0;
      padding: 0;
    }
    .outer {
      border: red dashed 2px;
    }
    .ui-wrapper, .member {
      display: inline-block;
      vertical-align: top;
    }
    

    js:

    $(".res").resizable({
        aspectRatio: true,
        // ghost: true,
        stop: function(event, ui) {
          height=ui.size.height;
        // $(".ui-wrapper, .member").height(height + "px");
          $(".ui-wrapper, .member").each(function() {
                ratio = height / $(this).height();
            console.log(parseInt($(this).height() * ratio, 10));
                $(this).css("height", parseInt($(this).height() * ratio, 10));
                $(this).css("width", parseInt($(this).width() * ratio, 10));
          });
        }
    });
    

    demo