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

【问题标题】：Jquery resizable issue where div contracts to have width and height of zeroJquery 可调整大小的问题，其中 div 合同的宽度和高度为零
【发布时间】：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" width="500"></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/

感谢任何帮助。

谢谢

【问题讨论】：

相同的组合（可调整大小 + 可拖动）。同样的问题。
没有遏制一切正常：“父母”。

标签： jquery draggable css-position crop resizable

【解决方案1】：

问题在于纵横比。

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

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

【讨论】：