How to resize an image on click with jQuery?

I've the next problem: I've got a div which contains an image.

I need this image resized if is bigger than the width of the div, and if the user click the开发者_JAVA技巧 image, show it at the full size.

The div width is managed with the windows width.

How do I do that?

You can use the .css() function to set the size of the image, or if you want to make it a bit spiffier, you can use .animate() to animate the change.

Say your image's id is #myimage, this is how you would do it.

$("#myimage").click(function(){
   var imgWidth=    $(this).css("width");
   var imgHeight =  $(this).css("height");
   //Checks if the image is already in original size:
   if(imgWidth == originalWidth && imgHeight == originalHeight)
   {
       resizeImage();
   }
   else
   {
       $(this).css({width:originalWidth, height: originalHeight});
   }

});

This assumes you already saved away the original size of the image, since otherwise, there's no way to calculate how big the picture used to be.

EDIT:

Assume your div's id is #mydiv

the $(document).ready() is called when the page finishes loading.

function resizeImage()
{
        var imgWidth=    $("#myimage").css("width");
        var imgHeight =  $("#myimage").css("height");
        var divWidth = $("#mydiv").css("width") ;
        var divHeight = $("#mydiv").css("height") ;
        originalHeight = imgHeight;
        originalWidth=imgWidth;

        if (imgWidth > divWidth && imgHeight > divHeight)
        {
            var heightDiff = imgHeight  - divHeight;
            var widthDiff = imgWidth  - divWidth;
            //First find out which of the two dimensions is MORE boundry stretching, then we only change that dimension, to keep the image's original proportions.
            if(heightDiff>widthDiff)
            {
                $("#myimage").css("height", divHeight); //Set the
            }
            else
            {
                $("#myimage").css("width", divWidth); //Set the width to the div's width
            }
        }
        else if(imgWidth > divWidth)
        {
            $("#myimage").css("width", divWidth); //Set the width to the div's width
        }
        else if (imgHeight > divHeight)
        {
            $("#myimage").css("height", divHeight); //Set the height to the div's height
        }
}

$(document).ready(function(){
    resizeImage();
});

jQuery.popeye is a slick plugin for doing interactions like this.

Jquery imagefit can be used + a modal popup box of choice