jquery - 根据 jQuery 中的尺寸调整每个图像的大小

Question

我已经有了如何实现这个结果的基本概念，但是我似乎无法真正获得我想要的结果。我正在创建 100px(高)x 75px(宽)的固定容器，用于存储图像。然后，我尝试使用 jQuery 来检查图像高度是否大于宽度，反之亦然，或者它们是否相等。如果它们相等或宽度较大，我将它们分别设置为 100% 并将高度设置为自动，而如果高度值较大，我将其设置为 100% 并将宽度设置为自动。下面是我当前的代码，它正在调整图像的大小，但不是按照我想要的方式调整图像的大小。

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

问题是您正在测试图片的高度和宽度之间的差异...如果容器是正方形，它会完美地工作，但由于它是矩形，所以这是错误的。

这里:

$(".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%'
        });
    }
});

不确定代码是否100%正确，未测试。但基本上我们测试高度/宽度的比率并将其与容器的比率进行比较，以便能够决定我们要做什么调整大小。