jQuery调整宽高比

问题描述

如何将jQuery中的图像调整为一致的宽高比。例如，设置最大高度并正确调整宽度。谢谢。

How would I resize a image in jQuery to a consistent aspect ratio. For example setting maximum height and have the width resize correctly. Thanks.

推荐答案

你可以手动计算，

即：

function GetWidth(newHeight,orginalWidth,originalHeight)
{
if(currentHeight == 0)return newHeight;
var aspectRatio = currentWidth / currentHeight;
return newHeight * aspectRatio;
}

确保使用图像的ORIGINAL值，否则会随着时间的推移而降低。

Make sure you use the ORIGINAL values for the image otherwise it will degrade over time.

编辑：示例jQuery版本（未测试）

example jQuery version (not tested)

jQuery.fn.resizeHeightMaintainRatio = function(newHeight){
    var aspectRatio = $(this).data('aspectRatio');
    if (aspectRatio == undefined) {
        aspectRatio = $(this).width() / $(this).height();
        $(this).data('aspectRatio', aspectRatio);
    }
    $(this).height(newHeight); 
    $(this).width(parseInt(newHeight * aspectRatio));
}

这篇关于jQuery调整宽高比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！