change image dimensions with jquery

DAKSH picture DAKSH · Jul 1, 2011 · Viewed 94.5k times · Source

I have a image under div id myimage. Now I want to resize it by using change. I want from select box if selected 700X7000 then image's size will be height 700px and width 700px. With out reloading the page. Can anyone help me how can I do this?

Answer

Blender picture Blender · Jul 1, 2011

Well, to change it, you can just set the image's width() and height():

$('#myimage').width(700); // Units are assumed to be pixels
$('#myimage').height(700);

So for you to do the drop down box, you can just set the values to be something like 100x100, 200x200, etc. and split the selected value to extract the dimensions:

var parts = '100x100'.split('x');
var width = parseInt(parts[0], 10); // 10 forces parseInt to use base 10
var height = parseInt(parts[1], 10);