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 に答える