jQuery UI：当我增加/减少 div 的大小时，如何设置调整大小限制、纵横比答案

【问题标题】：jQuery UI : How can I set the resizing limit, aspect ratio when I increase/decrease the size of the divjQuery UI：当我增加/减少 div 的大小时，如何设置调整大小限制、纵横比
【发布时间】：2017-07-06 08:07:33
【问题描述】：

我有一个 div 标签，它是（div 标签）可调整大小的，并且在里面我有一个 h1 标签（或者它可以是任何标签）。

问题：

我有两个问题：

纵横比无法正常工作，因为我想要的意思是“当我增加/减少 div 的大小时，它的高度会变大”所以我该如何正确设置它和
我想在调整大小时修复最小宽度意味着“如果将大小减小到 27px，它就会停止减小。”

代码

$('.draggable_element').each(function() {
        $(this).resizable({
        autoHide: true,
      handles: 's,e,w',
      aspectRatio: 1/9
    });
})

Here is my jsFiddle

更新：

我想我没有正确解释我的第一个问题要知道第一个问题是什么请访问我的小提琴链接尝试从左侧或右侧调整 div 的大小（增加/减少）div 的高度会自动增加问题

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

aspectRatio 应该是布尔值。您可以使用宽度和高度设置大小。

或者，您也可以尝试将比率更改为“9/1”：aspectRatio: 9/1，也应该这样做...

设置'minWidth: 27'。

$(this).resizable({
  autoHide: true,
  handles: 's,e,w',
  aspectRatio: true,
  minWidth: 27
});

【讨论】：

【解决方案2】：

对于您的第一个问题，您可以使用aspectRatio: true，它将根据您元素的宽度和高度使用初始纵横比。

对于您的第二个问题，您可以使用minWidth 选项

$('.draggable_element').each(function() {
    $(this).resizable({
      autoHide: true,
      handles: 's,e,w',
      aspectRatio: true,
      minWidth: 27
  });
})

【讨论】：

好的，我明白了。我已经更新了我的答案。你可以看看。

【解决方案3】：

正如我看到你的小提琴一样。为什么你不只是删除aspectRatio。正如您所期望的那样，它会更好地为您服务。

请更新您的 resize()。

$(this).resizable({
  autoHide: true,
  handles: 's,e,w',
  minWidth: 27
});

我想你可能看起来像这个

觉得会有帮助

【讨论】：