根据jQuery中的维度调整每个图像的大小

Question

I've got a basic concept of how to achieve this result, however i can't seem to actually obtain the results i want. I'm creating fixed containers of 100px (height) x 75px (width) in which images are stored. I'm then attempting to use jQuery to run a check on whether or not the images height is bigger than it's width, visa versa or they are equal. If they are equal or the width is bigger, i set those to 100% each and set height as auto, whereas if the height is the greater value, i set that to 100% and width to auto. Below is the current code I have which is resizing the images, but not to how i would like them too.

HTML

<div id="imagesContainer">
    <div style="height: 100px; width: 75px; border: 1px solid RGB(0, 0, 0);">
        <div class="thumbImage">
            <img src="INSERT 100 x 500 IMAGE HERE"></img>
        </div>
    </div>

    <div style="height: 100px; width: 75px; border: 1px solid RGB(0, 0, 0);">
        <div class="thumbImage">
            <img src="INSERT 250 x 280 IMAGE HERE"></img>
        </div>
    </div>

    <div style="height: 100px; width: 75px; border: 1px solid RGB(0, 0, 0);">
        <div class="thumbImage">
            <img src="INSERT 100 x 100 IMAGE HERE"></img>
        </div>
    </div>

    <div style="height: 100px; width: 75px; border: 1px solid RGB(0, 0, 0);">
        <div class="thumbImage">
            <img src="INSERT 1800x900 IMAGE HERE"></img>
        </div>
    </div>
</div>

jQuery

$(".thumbImage").children("img").each(function(){
    if ($(this).height() > $(this).width()) {
        $(this).css({
            height: '100%',
            width: 'auto'
        });
    } else if ($(this).height() < $(this).width() || ($(this).height() == $(this).width()) {
        $(this).css({
            height: 'auto',
            width: '100%'
        });
    }
});

Answer 1

The problem is that you are testing on the difference between the picture's height and width... It would work flawlessly if the container was square, but since it is a rectangle, it is wrong.

Here:

$(".thumbImage").children("img").each(function(){
    imgRatio = $(this).height()/$(this).width();
    containerRatio = $(this).parent().height()/$(this).parent().width();
    if (imgRatio > containerRatio) {
        $(this).css({
            height: '100%',
            width: 'auto'
        });
    } else {
        $(this).css({
            height: 'auto',
            width: '100%'
        });
    }
});

Not sure if the code is 100% correct, did not test. But basically we test on the RATIO of the height/width and compare it with the container's ratio to be able to decide what resize we do.

Answer 2

You have a syntax error in your script, and '.thumbImage' must be set to a height of 100%:

Syntax error:

if( $(this).height() < $(this).width() || ($(this).height() == $(this).width() ) )

(You missed a closing bracket)

CSS:

.thumbImage {
    height:100%;
} 

JS Fiddle: http://jsfiddle.net/fMhr2/1/

Also, you should calculate the ratio to get it to work properly, like Salketer just mentioned. I added that to this JSFiddle