Jquery's可调整大小的Div'调整大小时，s“宽度”和“高度”将变为0

Jquery's Resizable Div's Width and Height turns to 0 when resize

本文关键字：高度 宽度 调整 可调整 Div 小时 Jquery      更新时间：2023-09-26

我有这个代码：

<table>
    <tr>
        <td id="parent">
            <div id="child"></div>
        </td>
    </tr>
</table>

我的JavaScript代码：

$('#child' ).resizable({
    animate: true,
    helper: '.ui-resizable-helper',
    maxWidth: 500,
    maxHeight: 500,     
    aspectRatio: true
});

使用上面的代码，我的可调整大小的div可以按预期工作，但当我添加containment选项时，无论向哪个方向调整大小，div的width和height都会调整为0。

   $('#child' ).resizable({
        animate: true,
        helper: '.ui-resizable-helper',
        maxWidth: 500,
        maxHeight: 500,     
        aspectRatio: true,
        containment: '#parent'
    });

为什么会这样？是虫子吗？

尝试添加此CSS:

#parent {
  width: 500px;
  height: 500px;
}

问题不在于#父项，而在于#子项。应用以下CSS，使其具有基本起始大小。

#child {
  height:200px;
  width:200px;
}

你也可以在这里看到我的小提琴，用你的代码来说明变化。

<table>
    <tr>
        <td>
            <div class="child" style="border:solid 1px red;">
            </div>
        </td>
                <td>
            <div class="child" style="border:solid 1px red;">
              <p>this is a test
            </p>
            </div>
        </td>
    </tr>
</table>

为子定义最小宽度和高度

.child {
 min-width:50px;
 min-height:50px;
}

将containment设置为document，并添加默认的minHeight、minWidth值。

  var defaultHeight = $('#child').height();
  var defaultWidth = $('#child').width();
 $('.child').resizable({
        animate: true,
        helper: '.ui-resizable-helper',
        minHeight:defaultHeight,
        minWidth:defaultWidth,
        maxWidth: 500,
        maxHeight: 500,     
        aspectRatio: true,
        containment: 'document'
    });

小提琴

相关文章：