CODEWITHSUNDEEP
javascriptjquery
user1115666
user1115666

Reputation:

resize all images while maintaining the aspect ratio of each

I'm fairly new to this stuff and I've got a small problem — what I'm trying to do is resize all of the images on a web page (more specifically, the images within each element with the id #post) and scale them down a bit

var currentWidth = $("#post img").width();
$("#post img").each(function () {
    $(this).css({'width': currentWidth / 1.5 + "px"});
});

The problem is that I think it's grabbing the width of the first image and using that for all of them, so they all end up being the same size as the first scaled down image. Any way to fix this so that each image's width grabbed and properly scaled down?

Upvotes: 0

Views: 62

Answers (1)

Paul Roub
Paul Roub

Reputation: 36438

You're correct - you're getting a single width and using it throughout the loop. You're already halfway there, using this within the loop. Just follow that through:

$("#post img").each(function () {
    var currentWidth = $(this).width();

    if (currentWidth > 900) {
      $(this).css({'width': currentWidth / 1.5 + "px"});
    }
});

Upvotes: 2

Related Questions