<div>
You shared localhost url so please share a public url so we can help you;
</div>


You shared localhost url so please share a public url so we can help you;

<div>
Ooops! The link is <a href="http://webintenerife.com/test_resizable.php" rel="ugc">this</a>
</div>


Ooops! The link is this [http://webintenerife.com/test_resizable.php]

<div>
Try to use all the handles (assuming that ur image id is #myimage ) :<br />
<br />

<pre><code id="code-20-41532417-1">$( &quot;#myimage&quot; ).resizable({
  handles: &quot;n, e, s, w&quot;
});</code></pre>
</div>


Try to use all the handles (assuming that ur image id is #myimage ) :



$( "#myimage" ).resizable({
  handles: "n, e, s, w"
});

<div>
Hi Moussa. No that doesn't solve the problem. <a href="http://webintenerife.com/test_resizable.php" rel="ugc">Check it now</a>. It looks like the problem is with the height : if you resize width the image is correctly resized preserving ratio but the ui-resizable height doesn't change; if you resize the height the image doesn't resize and only ui-resizable is resized...
</div>


Hi Moussa. No that doesn't solve the problem. Check it now [http://webintenerife.com/test_resizable.php]. It looks like the problem is with the height : if you resize width the image is correctly resized preserving ratio but the ui-resizable height doesn't change; if you resize the height the image doesn't resize and only ui-resizable is resized...

<div>
It solved my issue.<br />
Thank you both for trying to help, but this time I did it myself :-)
</div>


It solved my issue.
Thank you both for trying to help, but this time I did it myself :-)

<div>
<div class="content wysiwyg-content">
Hi everybody.<br />
In a 3rd party site I'm working on to refactor it, they used jquery-ui resizable to allow user to resize an image after the upload. Everything works fine, but resizing the image I see the handles go to the top speedier than the image itself.<br />
You can see what I mean in the 2 screenshots<br />
<a href="https://filedb.experts-exchange.com/incoming/2016/04_w14/1089502/start.jpg" target="_blank" title="When page loads the handle is aligned (42 KB)"><img alt="When page loads the handle is aligned" class="file-block lazyload" style="max-width: 511px;" data-src="https://filedb.experts-exchange.com/incoming/2016/04_w14/1089502/start.jpg" /></a><a href="https://filedb.experts-exchange.com/incoming/2016/04_w14/1089503/resized.jpg" target="_blank" title="But resizing the alignement can be lost (44 KB)"><img alt="But resizing the alignement can be lost" class="file-block lazyload" style="max-width: 510px;" data-src="https://filedb.experts-exchange.com/incoming/2016/04_w14/1089503/resized.jpg" /></a>I reproduced the issue <a href="http://localhost/wit_V/test_resizable.php" rel="ugc">here</a><br />
What am I missing here?
</div>
</div>


resized.jpg

start.jpg

Hi everybody.
In a 3rd party site I'm working on to refactor it, they used jquery-ui resizable to allow user to resize an image after the upload. Everything works fine, but resizing the image I see the handles go to the top speedier than the image itself.
You can see what I mean in the 2 screenshots


I reproduced the issue here (http://localhost/wit_V/test_resizable.php)
What am I missing here?

jquery-ui ui-resizable-se strange behavior

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

jQuery

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.

HTML

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.