Question

我有一个如何实现这个结果的基本概念，但是我似乎无法真正获得我想要的结果。我正在创建100px（高度）x 75px（宽度）的固定容器，其中存储图像。然后我尝试使用jQuery检查图像高度是否大于宽度，反之亦然或者它们是相等的。如果它们相等或宽度更大，我将它们设置为100％并将高度设置为auto，而如果高度是更大的值，我将其设置为100％，宽度设置为auto。下面是我现有的调整图像大小的代码，但不是我想要的代码。

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％正确，没有测试。但基本上我们测试高度/宽度的RATIO，并将其与容器的比率进行比较，以便能够决定我们的调整大小。

Answer 2

您的脚本中存在语法错误，并且'.thumbImage'必须设置为100％的高度：

语法错误：

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

（你错过了一个结束括号）

CSS：

.thumbImage {
    height:100%;
}

JS小提琴： http://jsfiddle.net/fMhr2/1/

此外，您应该计算比率以使其正常工作，例如Salketer刚才提到的。我把它添加到这个JSFiddle

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

2 个答案: