调整所有图像的大小，同时保持每个图像的纵横比

Question

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?

Answer 1

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"});
    }
});