Change size of an image with JavaScript/jQuery

This post will discuss how to change the size of an image in JavaScript and jQuery.

1. Using JavaScript

In plain JavaScript, you can directly modify the CSS width and height property of the image.

The following example demonstrates this by altering the CSS width property by specifying the absolute value in pixels and leave the browser to calculate the corresponding height while maintaining the aspect ratio.

JS

document.querySelector('button').onclick = function() {

var image = document.getElementById('container');

image.style.width = '156px';

image.style.height = 'auto';

}

HTML

1 2	<img id="container" src='https://avatars0.githubusercontent.com/u/70142' /> <button>Resize</button>

Edit in JSFiddle

You can either provide an absolute value or value in percentage. The following example changes the size of an image relative to its original size.

JS

document.querySelector('button').onclick = function() {

var image = document.getElementById('container');

image.style.width = '50%';

image.style.height = 'auto';

}

HTML

1 2	<img id="container" src='https://avatars0.githubusercontent.com/u/70142' /> <button>Resize</button>

Edit in JSFiddle

Alternatively, you can directly modify the actual height and width attributes of the image.

JS

document.querySelector('button').onclick = function() {

var image = document.getElementById('container');

image.height = 156;

image.width = 156;

}

HTML

1 2	<img id="container" src='https://avatars0.githubusercontent.com/u/70142' /> <button>Resize</button>

Edit in JSFiddle

2. Using jQuery

With jQuery, you can use the .css() method to set CSS width and height property.

jQuery

$(document).ready(function() {

$('button').click(function() {

$('#container')

.css('width', '156px')

.css('height', 'auto');

});

HTML

1 2	<img id="container" src='https://avatars0.githubusercontent.com/u/70142' /> <button>Resize</button>

Edit in JSFiddle

The .css() method can also take a single object of key-value pairs. So, the code can be shortened to:

$(document).ready(function() {

$('button').click(function() {

$('#container').css({'width': '156px', 'height': 'auto'});

});

Edit in JSFiddle

Another plausible solution is to specify the width and height in a CSS class and apply that class to the image element. This can be easily done using the jQuery’s .addClass() method. To overwrite an existing class, don’t forget to include !important declarations.

jQuery

$(document).ready(function() {

$('button').click(function() {

$('#container').addClass('small');

});

CSS

#container {

width: 200px;

height: 200px;

border: 1px solid;

}

.small {

width: 156px !important;

height: auto !important;

}

HTML

1 2	<img id="container" src='https://avatars0.githubusercontent.com/u/70142' /> <button>Resize</button>

Edit in JSFiddle

That’s all about changing the size of an image in JavaScript and jQuery.

Change size of an image with JavaScript/jQuery

1. Using JavaScript

JS

HTML

JS

HTML

JS

HTML

2. Using jQuery

jQuery

HTML

jQuery

CSS

HTML

Share this: