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.
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() { // Size 50x50px $('img.size-50x50').attr('src', 'profile_pic.png').width('50').height('50'); // Size 100x100px $('img.size-100x100').attr('src', 'profile_pic.png').width('100').height('100'); // Size 200x200px $('img.size-200x200').attr('src', 'profile_pic.png').width('200').height('200'); }); |
See live working demo and download source code.