Question

I have multiple images that have the same class attribute and I want to resize all the images uniformly even though they all have different original widths – how can I do this using jQuery?

<img id=img1 class="ResizeMe" src="img1.gif" width="100" height="100" /><br />

<img id=img2 class="ResizeMe" src="img2.gif" width="200" height="200" /><br />

<img id=img3 class="ResizeMe" src="img3.gif" width="150" height="150" /><br />

<input id="Button1" type="button" value="Shrink Images by 10%" />
<input id="Button2" type="button" value="Grow Images by 10%" />

TIA!

UPDATE: Here’s the final working code I used for anyone hitting this in the future…

        function OnClientValueChanging(sender, args) 
        {
            var zoomPercentage = args.get_newValue() / 100;

            $(".ApplyZoomEffect").each(function () {
                var newWidth = parseFloat($(this).attr('OriginalWidth')) * zoomPercentage;
                var newHeight = parseFloat($(this).attr('OriginalHeight')) * zoomPercentage;
                $(this).css('width', newWidth + "px").css('height', newHeight + "px");
            });
        }

Answer 1

Try this style:

$("#Button1").click(function() {
  $(".ResizeMe").width(function(i, w) { return w * 0.9 })
                .height(function(i, h) { return h * 0.9 });
});

$("#Button2").click(function() {
  $(".ResizeMe").width(function(i, w) { return w * 1.1 })
                .height(function(i, h) { return h * 1.1 });
});

Since jQuery 1.4.1, you can pass a function to .width() and .height() to accomplish this more cleanly.