Powiększenie wszystkich obrazków w rzędzie, powiększając jeden obrazek za pomocą myszki

Question

Celem tego projektu jest, aby po przeskalowaniu za pomocą myszki jednego obrazka, pozostąłe obrazki również się zeskalowały. Zasadą dla wszyskich obrazków jest zachowanie proporcji obrazka. Doszedłęm do momentu, że wszystkie obrazki automatycznie uzyskują właściwą wysokość, ale niestety ich szerokość pozostaje niezmieniona. Poproszę o jakieś wskazówki i  pomoc. Oto link do codepen i kod. Z góry dziękuję

demo

$(".res").resizable({
    aspectRatio: true,
    ghost: true,
    stop: function( event, ui) {
  height=ui.size.height;
  $(".ui-wrapper, .member").height(height + "px");
}
});

* {
  margin: 0;
  padding: 0;
}
.outer {
  border: red dashed 2px;
  position: relative;
}
.ui-wrapper, .member {
  display: inline-block;
}
.member, .ui-wrapper {
  width:auto;
}

<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>

 

Answer 1

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

$(".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