如何按比例調整圖像大小

按比例調整圖像大小是一項常見任務，可用於將圖像調整為特定尺寸，同時保持其寬高比比率。這在處理需要一致顯示的不同尺寸的影像時特別有用。

要使用 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 };
}

此函數採用影像的原始寬度和高度以及最大可用寬度和高度，並計算將寬高比保持在指定限制內的新寬度和高度。