アスペクト比を維持しながら画像のサイズを比例的に変更するにはどうすればよいですか?

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

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

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

<code class="javascript">$('img').css({
  'max-width': '100%',
  'max-height': '100%',
  'width': 'auto',
  'height': 'auto'
});</code>

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

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

<code class="javascript">function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

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

    return { width: srcWidth*ratio, height: srcHeight*ratio };
}</code>

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

以上がアスペクト比を維持しながら画像のサイズを比例的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。