resize image using JQuery

DrRakha

resize image using JQuery when press button :
javascript code

<html>
<head>
<title>Resize Image under JQuery</title>

<!--
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
 Note you can download the JQuery package instead of using Google version. --> 
<script src="jquery-1.8.3.js"></script>
<script>
   $(document).ready(function(){
         $("button").click(function(){
    // IMAGE RESIZE
    $('img#resize').each(function() {
    var widthLimit = 20;
    var maxHeight = 20;
    var ratio = 0;
    var width = $(this).width();
    var height = $(this).height();
     
    if(width > widthLimit){
    ratio = widthLimit / width;
    $(this).css("width", widthLimit);
    $(this).css("height", height * ratio);
    height = height * ratio;
    }
    var width = $(this).width();
    var height = $(this).height();
    if(height > heightLimit){
    ratio = heightLimit / height;
    $(this).css("height", heightLimit);
    $(this).css("width", width * ratio);
    width = width * ratio;
    }
    });
     });
    });

</script>
</head>
<body>
<p> Press the button to resize the image </p>
<img id="resize" src="site_logo.gif" />

<button>Resize Image</button>

</body>
</html>

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka

resize image using JQuery

Topic Tags