1

我对如何实现这个结果有一个基本概念，但是我似乎无法真正获得我想要的结果。我正在创建存储图像的 100 像素（高度）x 75 像素（宽度）的固定容器。然后我尝试使用 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%'
        });
    }
});
4

2 回答 2

3

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

这里：

$(".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 并将其与容器的比率进行比较，以便能够决定我们要调整大小。

于 2013-06-25T08:52:28.883 回答
1

您的脚本中有语法错误，并且“.thumbImage”必须设置为 100% 的高度：

语法错误：

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

（你错过了一个右括号）

CSS：

.thumbImage {
    height:100%;
}

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

此外，您应该计算比率以使其正常工作，就像刚才提到的 Salketer 一样。我将它添加到这个 JSFiddle

于 2013-06-25T08:51:33.687 回答