jQuery更改图像高度保持纵横比

Question

所以我有一个画廊,我的大多数图像目前由CSS控制100%.但是,在设置最小高度:100%; 在我的图像上,我会让一些人伸展.我没有太多有问题的照片,但我无法控制用户上传的内容.

无论如何使用jQuery我可以获得图像高度并检查它是否符合要求,如果没有,以某种方式增加图像宽度以满足高度要求但保持所有比例？因此,我因此避免造成任何扭曲,但通过使div没有间隙保持画廊整洁.

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

更新 - - - - -

我找到了一个目前似乎工作正常的解决方案,它可能不是最好的尝试,但我找到了另一个帮助我的答案: 如何按比例调整图像/保持纵横比？

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

**更新最终版本*********在玩完之后,我从拇指脚本中取出了一个小小的snippit,只是它将图像绝对定位在容器内的部分.

$(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

我找到了目前似乎可行的解决方案，它可能不是最佳尝试，但我找到了另一个对我有帮助的答案： 如何按比例调整图像大小/保持纵横比？

我的发现更新了问题

$(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 );
   });
});