How to set image height and width dynamically using jquery.

Here in this quick tutorial, I am going to show you that how you can easily assign image height and width dynamically using .height() and .width() function in jquery. Some time you need to require images in different different sizes for your application, You can use this quick jquery method to re-size your images as you can display many thumbnail images from single image.



Note: This method will not optimize image, By this method you can only quickly re-size image sizes on run-time, For optimizing images you must have to crop images in different different sizes on runtime. But if you want quick solution then you can follow this approach.
image-size
First of all include javascript on your page.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <img />
</body>
</html>

Now let’s start, Suppose We have an image in folder with default size like profile picture(400×400), And you have to show this picture on your application in different different sizes then follow below jquery function to re-sizing images dynamically.

$(function() {   
  $('img').attr('src', 'profile_pic.png').width('100').height('100');
});



Or you can create different different classes for many sizes.

$(function() {   
  
  $('img.size-50x50').attr('src', 'profile_pic.png').width('50').height('50');
  
  $('img.size-100x100').attr('src', 'profile_pic.png').width('100').height('100');
  
  $('img.size-200x200').attr('src', 'profile_pic.png').width('200').height('200');
});

See live working demo and download source code.

DEMO

DOWNLOAD

If you like this post please don’t forget to subscribe my public notebook for more useful stuff