1

我对 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/

任何帮助表示赞赏。

谢谢

4

1 回答 1

1

问题在于纵横比。

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

$('div.crop').draggable({
containment: 'parent',
}).resizable({
    containment: 'parent',
    handles: 'all',
    aspectRatio: 16 / 12
});
于 2013-04-08T08:47:52.150 回答