如何使用 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中文網其他相關文章！