选择，然后使用jQuery调整具有一定比例的图像的大小

Question

On my Tumblr blog, I'm trying to use jQuery to select photo entries (imgs) that have certain ratios and resize them in certain ways.
Specifically: If an image's width is greater than 250px, resize it so the height is 250px, and the width "auto". If an image's height is greater than 250px, resize it so the width is 250px, and the height "auto". Lastly, if the image is a perfect square, resize it to 250px by 250px. Here's what I'm currently using. If it's weirdly coded, please forgive me, I honestly just fiddled with it until I got some desired results...

<script>
$(document).ready(function() {
    $('.photo_post img').each(function() {
        var maxWidth = 250; // Max width for the image
        var maxHeight = 250;    // Max height for the image
        var ratio = 0;  // Used for aspect ratio
        var width = $(this).width();    // Current image width
        var height = $(this).height();  // Current image height

    // Check if the current width is larger than the max
    if(height > maxHeight){
        ratio = maxWidth / width;   // get ratio for scaling image
        $(this).css("width", maxWidth); // Set new width
        $(this).css("height", height * ratio);  // Scale height based on ratio
        height = height * ratio;    // Reset height to match scaled image
        width = width * ratio;    // Reset width to match scaled image
    }

    // Check if current height is larger than max
    if(height < maxHeight){
        ratio = maxHeight / height; // get ratio for scaling image
        $(this).css("height", maxHeight);   // Set new height
        $(this).css("width", width * ratio);    // Scale width based on ratio
        width = width * ratio;    // Reset width to match scaled image
        height = height * ratio;    // Reset height to match scaled image
    }
});
});
</script>

My problem is that it doesn't work correctly on all photos.
I'm not super familiar with jQuery, so deliberate and detailed answers are appreciated.

Answer 1

You need to check if the image is portrait or landscape and then adjust the size based on that.

Updated JS:

$(document).ready(function() {
$('.photo_post img').each(function() {
    var maxWidth = 250; // Max width for the image
    var maxHeight = 250;    // Max height for the image
    var ratio = 0;  // Used for aspect ratio
    var width = $(this).width();    // Current image width
    var height = $(this).height();  // Current image height


    // Portrait
    if (height > width) {

        // Check if the current height is larger than the max
        if(height > maxHeight){
            ratio = maxHeight / height; // get ratio for scaling image
            $(this).css("height", maxHeight);   // Set new height
            $(this).css("width", width * ratio);    // Scale width based on ratio
            width = width * ratio;    // Reset width to match scaled image
            height = height * ratio;    // Reset height to match scaled image

        }
    }
    // Landscape
    else {

        // Check if the current width is larger than the max
        if(width > maxWidth){
            ratio = maxWidth / width;   // get ratio for scaling image
            $(this).css("width", maxWidth); // Set new width
            $(this).css("height", height * ratio);  // Scale height based on ratio
            height = height * ratio;    // Reset height to match scaled image
            width = width * ratio;    // Reset width to match scaled image
        }
    }
});

});