Jquery 可调整大小的问题，其中 div 合同的宽度和高度为零

Posted 2023-05-08

【中文标题】Jquery 可调整大小的问题，其中 div 合同的宽度和高度为零

【英文标题】：Jquery resizable issue where div contracts to have width and height of zero

【发布时间】：2013-01-06 06:05:50

【问题描述】：

我在 jquery UI 的可调整大小方面遇到了问题。我环顾四周，找不到和我有同样问题的人。基本上，当我尝试从任何边缘或角落调整 div 的大小时，它的宽度和高度都会变为 0。

这是我的 html、CSS 和 JS 的内容。

HTML：

<div class="container">
    <img src="http://www.deshow.net/d/file/cartoon/2008-12/bob-ross-landscape-painting-281-2.jpg" ></img>
    <div class="crop"></div>
</div>

CSS：

div.container 
    position: relative;
    margin-top: 5px;

img 
    position: absolute;
    top: 0;
    left: 0;

div.crop 
    position: absolute;
    width: 300px;
    height: 200px;
    border: 2px dashed black;
    z-index: 10;

javascript：

$('div.crop').draggable(
    containment: 'parent',
).resizable(
    containment: 'parent',
    handles: 'all',
    aspectRatio: 3/2
);

我已经在 jsfiddle 上复制了这个问题 http://jsfiddle.net/MWcPv/

感谢任何帮助。

谢谢

【问题讨论】：

相同的组合（可调整大小 + 可拖动）。同样的问题。

没有遏制一切正常：“父母”。

【参考方案1】：

问题在于纵横比。

父级也没有高度和宽度，即里面的内容是绝对定位的，所以父级的高度和宽度为 0。我已将高度和宽度添加到父级并禁用纵横比。试试这个http://jsfiddle.net/aamir/MWcPv/6/

$('div.crop').draggable(
containment: 'parent',
).resizable(
    containment: 'parent',
    handles: 'all',
    aspectRatio: 16 / 12
);