调整大小后通过鼠标连续调整其余图像的大小，并保持比例

Posted 2023-05-08

【中文标题】调整大小后通过鼠标连续调整其余图像的大小，并保持比例

【英文标题】：Resizing by mouse the rest of images in a row after resizing a one, and keep ratio

【发布时间】：2021-02-28 06:28:27

【问题描述】：

我正在使用jQuery ui Resizable

调整大小后，所有图像都应更新：它们的高度和宽度。但是对于用户实际上没有调整大小的图像，只有高度被更新。所以图像越来越失真。如何改进我的代码以在调整大小时保持所有图像的比例？

* 
  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"  />
  <img class="res image member" src="https://via.placeholder.com/100x50"  />
  <img class="res image member" src="https://via.placeholder.com/100x50"  />
</div>
<script>
$(".res").resizable(
    aspectRatio: true,
    ghost: true,
    stop: function( event, ui) 
  height=ui.size.height;
  $(".ui-wrapper, .member").height(height + "px");
);
</script>

编辑

代码片段不起作用，所以我在调整大小之前和之后添加了一个屏幕截图：

中间图片调整大小后：

编辑2

还有一个演示：

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

【参考方案1】：

* 
  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