CODEWITHSUNDEEP
jquery
Rickstar
Rickstar

Reputation: 6189

how to resize image in javascript or jquery

i am trying to resize a image by 50% how would i be able to do that can some one lead me the the right path please

Thank You

Upvotes: 2

Views: 3787

Answers (6)

JacobG182
JacobG182

Reputation: 329

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%');
});

Upvotes: 0

Gabriel
Gabriel

Reputation: 18780

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.

Upvotes: 0

Abe Miessler
Abe Miessler

Reputation: 85036

You can use jQuery's animate method:

.animate({width: maxWidth})

Upvotes: 1

Harmen
Harmen

Reputation: 22438

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

jQuery:

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

Upvotes: 2

Plaudit Design
Plaudit Design

Reputation: 1156

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

Upvotes: 2

Kamyar
Kamyar

Reputation: 18797

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

Upvotes: 2

Related Questions