Как связать jQuery, изменяемый по размеру с изображением?

Question

Я хотел бы знать, как сделать изменяемое изображение с помощью jQuery на лету. Это что-то вроде изображения, имеющего изменчивую границу, и мы можем перетащить эту границу с помощью мыши, чтобы стать меньше или больше изображения. Когда я использую resizable, только фоновый континент становится больше, но изображение все равно того же размера. Заранее благодарю за ваши драгоценные ответы!

Answer 1

С HTML изображения, как это:

<img id="resizebleImage" src="images/mypic.gif" width="200px" 
height="135px"> 

Jquery

$(function(){ 
    $("#resizebleImage").resizable(); 
}); 

Answer 2

Применяете ли вы к контейнеру div или фактическому изображению?

как в:

$('img').resizable(); 

К сожалению, не уверен в синтаксисе.

Answer 3

CSS

.container { width:130px; height:200px; } 
.container img { 
width:100%; /* Set to auto to preserve aspect ratio */ 
height:100% } 

HTML:

<div class=container><img src=yourimg.jpg /></div> 

JS

$('div.container').resizable() 

Работает в FF