how to resize image in javascript or jquery

Use JQuery Image Resize Plugin
Also, you can find a good documentation here

Resizing an image on the client side is bad idea if you will only display the image at a reduced size. Their computer downloads the entire image. Resize on the backend. A good program to resize with is imagemagick. Additionally most browsers do a bad job resizing images. Programs like imagemagick use better algorithms. (Though I heard recently that some newer browsers are getting much much better at it.)

<img src="someimage.jpg" id="image" />

jQuery:

$('#image').css({
  width: '50%',
  height: '50%'
});

You can use jQuery's animate method:

.animate({width: maxWidth})

The Many Options for Resizing Images in jQuery:

1. Use a Plugin: jQuery Image Resize Plugin here can be used to resize images.

2. Modify the CSS of the Image Directly: You can use $(imgselector).css() to manipulate any of the size attributes of the image. The available size attributes for an image are: height width maxHeight maxWidth minHeight minWidth So usage of this method would likely be: $("img").css("maxHeight","50%").css("maxWidth","50%")

3. Animate the Properties of the Image: This is similar to the method of changing the style attribute directly but allows you to transition the change and also to group the results that you want. For instance:

var halfSize = {maxWidth:"50%", maxHeight: "50%"};
var fullSize = {maxWidth:"100%", maxHeight: "100%"};
$("img").animate(halfSize);
$("img").animate(fullSize);

Warnings and Notes: Most of the time resizing images on the client is considered bad due to the bandwidth cost. If the application or site will be switching between full sized and smaller versions of the image then the animate method might give you a nice transition. The css and animate methods will place inline styles on the image styles you select.

There are multiple ways you can resize images using JQuery. Heres one way of doing it. Keep in mind this specific example I am just changing the width.

$(document).ready(function(){
  $("img").css('width', '50%');
});