如何按比例调整图像大小

按比例调整图像大小是一项常见任务，可用于将图像调整为特定尺寸，同时保持其宽高比比率。这在处理需要一致显示的不同尺寸的图像时特别有用。

要使用 jQuery 按比例调整图像大小，可以使用以下代码：

$('img').css({
  'max-width': '100%',
  'max-height': '100%',
  'width': 'auto',
  'height': 'auto'
});

此代码将图像的最大宽度和高度设置为 100%，这允许图像按比例缩放以适合这些尺寸。将“width”和“height”属性设置为“auto”以保持原始宽高比。

在保留图像宽高比的同时计算图像适当尺寸的另一种方法是使用calculateAspectRatioFit()函数:

function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
}

此函数采用图像的原始宽度和高度以及最大可用宽度和高度，并计算将宽高比保持在指定限制内​​的新宽度和高度。