画像のサイズを比例的に変更する方法

画像のサイズを比例的に変更することは、画像の縦横比を維持しながら特定のサイズに合わせるために使用できる一般的なタスクです。比率。これは、一貫して表示する必要があるさまざまなサイズの画像を操作する場合に特に便利です。

jQuery を使用して画像を比例的にサイズ変更するには、次のコードを使用できます:

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

このコードは、画像の最大幅と高さを 100% に設定します。これにより、画像がこれらの寸法内に収まるように比例的に拡大縮小できるようになります。元のアスペクト比を維持するために、「width」プロパティと「height」プロパティは「auto」に設定されます。

アスペクト比を維持しながら画像の適切な寸法を計算する別の方法は、calculateAspectRatioFit() を使用することです。 function:

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

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

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

この関数は、画像の元の幅と高さ、および利用可能な最大の幅と高さを取得し、指定された制限内でアスペクト比を維持する新しい幅と高さを計算します。