jQuery を使用してサイズ変更中に画像のアスペクト比を維持するにはどうすればよいですか?

jQuery を使用したサイズ変更中の画像のアスペクト比の制約

大きな画像を扱う場合、多くの場合、特定のサイズに合わせて画像を縮小する必要があります。画像の整合性を維持するには、元のアスペクト比を維持することが重要です。

比例サイズ変更用の JQuery 関数:

jQuery を使用してサイズ変更中に画像の縦横比を制限するには、次の関数を検討してください。 :

<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>

使用法:

この関数を使用するには、元の画像の寸法と必要な最大寸法を渡します:

<code class="javascript">var newDimensions = calculateAspectRatioFit(originalWidth, originalHeight, maxWidth, maxHeight);</code>

利点:

この関数を使用すると、特定の領域に制限されている場合でも、画像が比例して拡大縮小され、アスペクト比が維持されます。これは、Web 開発において画像の視覚的な整合性を維持するための貴重なツールです。

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