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