jQuery を使用して画像のサイズを比例的に変更するにはどうすればよいですか?

jQuery を使用した画像の縦横比の維持

画像の視覚的な整合性を維持するには、画像のサイズを比例的に変更することが重要です。 jQuery は、アスペクト比を維持しながら画像を拡大縮小する簡単なソリューションを提供します。

比例寸法を計算する方法

次の関数は、サイズ変更された画像の適切な幅と高さを決定します。 :

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

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

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

この関数は、元の画像の寸法 (srcWidth、srcHeight) と、使用可能な最大の幅と高さ (maxWidth、maxHeight) をパラメーターとして受け取ります。アスペクト比を維持するために、元の寸法と最大寸法の間の最小比率が計算されます。新しい幅と高さは、元の値にこの比率を乗算することによって決定されます。

jQuery を使用したロジックの適用

新しい寸法を計算したら、次のことができます。 jQuery を使用して画像のサイズを変更します。

<code class="js">var newDimensions = calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight);

$("img").width(newDimensions.width);
$("img").height(newDimensions.height);</code>

このコードは、選択した画像要素の幅と高さの属性を計算された値に動的に設定します。

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