Problème redimensionnable Jquery où div se contracte pour avoir la largeur et la hauteur de

Question

J'ai un problème avec l'interface utilisateur de jquery redimensionnable. J'ai regardé partout et je ne peux pas trouver quelqu'un avec le même problème que moi. Fondamentalement quand j'essaye de redimensionner le div de n'importe quels bords ou coins, sa largeur et sa hauteur vont à 0.

Voici ce que mes HTML, CSS et JS sont.

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 
}); 

J'ai reproduit le problème jsFiddle ici http://jsfiddle.net/MWcPv/

Tout il lp est apprécié.

Merci

Answer 1

Le problème était avec le rapport d'aspect.

Le parent n'a pas non plus de hauteur et de largeur, c'est-à-dire que le contenu à l'intérieur est positionné en absolu, donc le parent a 0 hauteur et largeur. J'ai ajouté la hauteur et la largeur au parent et désactivé le rapport d'aspect. Essayez-le

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