Hi Folks,
I'm new with jquery ui, but it seens that there is a bug with the
aspectRatio when used with the containment parameter.
When you're resizing and the "#crop" object hits the border of the
containment ".image", it loses its aspect ratio and keep resizing in
the other axis. For example, if it hits the right border, it will keep
resizing it's height.
Am I doing something wrong? Is all necessary .js linked?
Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="pt-br" lang="pt-
br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="http://localhost:8888/
css/ui.core.css" />
<link type="text/css" rel="stylesheet" href="http://localhost:8888/
css/ui.resizable.css" />
<link type="text/css" rel="stylesheet" href="http://localhost:8888/
css/ui.theme.css" />
<script type="text/javascript" src="http://localhost:8888/js/
jquery-1.3.1.js"></script>
<script type="text/javascript" src="http://localhost:8888/js/jquery-
ui-personalized-1.6rc6.js"></script>
<style type="text/css">
#imgHolder { position:absolute; }
#crop { position:absolute; top:50px; left:58px; width:50px;
height:
58px; background:white; filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5; }
</style>
<script>
$(document).ready(function(){
$("#crop").resizable({ aspectRatio: 150/175, containment:
'.image',
handles: 'n, e, s, w, ne, se, sw, nw'});
$("#crop").draggable({ containment: '.image'});
});
</script>
<title>Title</title>
</head>
<body>
<div id="imgHolder">
<img class="image" src="http://localhost:8888/images/corte_01.jpg"; />
<div id="crop"></div>
</div>
</body>
</html>
![http://localhost:8888/images/corte_01.jpg"](http://localhost:8888/images/corte_01.jpg"){kind=link}