javascript - jQuery 改变图像高度保持纵横比

Question

所以我有一个画廊，其中我的大部分图像目前 100% 由 CSS 控制。但是，在设置 min-height: 100%;在我的图像上，我使一些图像拉伸(stretch)。我没有太多有问题的照片，但用户上传什么是我无法控制的。

无论如何，使用 jQuery 我可以获得图像高度并检查它是否满足要求，如果不满足，则以某种方式增加图像宽度以满足高度要求但保持所有比例？因此，我避免造成任何失真，但通过让 div 没有间隙来保持画廊的整洁。

注意:提供的图像是我删除 min-height: 100%; 时发生的情况，以便您可以看到我的问题。

更新 - - - - -

我找到了一个目前似乎工作正常的解决方案，它可能不是最好的尝试，但我找到了另一个对我有帮助的答案: How to resize images proportionally / keeping the aspect ratio?

我只是稍微调整了代码，现在如果图像不符合 minHeight 要求，它将按比例调整图像大小，直到 minHeight到达。在测试中似乎对我来说工作正常。

**最终更新 ********* 试玩之后，我从 thumb 脚本中取出了一个小片段，就是将图像绝对定位在容器中的部分。

$(window).load(function() {

    $('.thumbnail img').each(function() {
        var maxWidth = 320; // Max width for the image
        var minHeight = 270;    // 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

        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
        }

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

        var $img = $(this),
        css = {
            position: 'absolute',
            marginLeft: '-' + ( parseInt( $img.css('width') ) / 2 ) + 'px',
            left: '50%',
            top: '50%',
            marginTop: '-' + ( parseInt( $img.css('height') ) / 2 ) + 'px'
        };

        $img.css( css );
   });

});

这会遍历我所有的缩略图，并相应地调整它们的大小。因此，如果不满足最小高度，图像将按比例放大，直到高度适合我的缩略图容器。然后底部将获取每张图像，对其进行绝对定位，然后将宽度和高度除以 2，以计算出要减掉多少边距才能使图像居中。我仍在对此进行调整，但目前似乎对我来说效果很好。我希望这对其他人有帮助。

或者

有类似问题的人我发现了这个:http://joanpiedra.com/jquery/thumbs/我已经开始编写自己的代码来做到这一点，但我将研究它的效果如何并根据需要对其进行调整。

Answer 1

我找到了一个目前似乎工作正常的解决方案，它可能不是最好的尝试，但我找到了另一个对我有帮助的答案: How to resize images proportionally / keeping the aspect ratio?

根据我的发现更新了问题

$(window).load(function() {
    $('.image-gallery-item-image-link img').each(function() {
        var maxWidth = 320; // Max width for the image
        var minHeight = 270;    // 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

        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
        }

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

        var $img = $(this),
        css = {
            position: 'absolute',
            marginLeft: '-' + ( parseInt( $img.css('width') ) / 2 ) + 'px',
            left: '50%',
            top: '50%',
            marginTop: '-' + ( parseInt( $img.css('height') ) / 2 ) + 'px'
        };

        $img.css( css );
   });
});