CODEWITHSUNDEEP
jqueryjquery-ui
Devyn
Devyn

Reputation: 2295

How to bind jQuery resizable with an image?

I would like to know how to make resizable image with jQuery on the fly. It's something like an image has resizable border and we can drag that border with mouse in order to become smaller or bigger of the image. When I use resizable, only background continent become bigger but image is still the same size. Thanks in advance for your precious replies!

Upvotes: 2

Views: 13238

Answers (3)

nobane
nobane

Reputation: 72

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()

Works in FF

Upvotes: 0

TStamper
TStamper

Reputation: 30384

With image html like this:

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

jquery

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

Upvotes: 8

Dmitri Farkov
Dmitri Farkov

Reputation: 9691

Are you applying resizable to the div container or the actual image?

as in:

$('img').resizable();

Sorry not sure about the syntax.

Upvotes: 1

Related Questions