根据容器的高宽和图片的实际高宽计算图片的同比例缩放后的尺寸

在JavaScript中,可以使用以下代码来根据容器的高宽和图片的实际高宽计算图片的同比例缩放后的尺寸:

function calculateScaledSize(containerWidth, containerHeight, imageWidth, imageHeight) {
  let scaledWidth, scaledHeight;

  // 计算宽度和高度的缩放比例
  const widthRatio = containerWidth / imageWidth;
  const heightRatio = containerHeight / imageHeight;

  // 取较小的缩放比例作为最终的缩放比例
  const scale = Math.min(widthRatio, heightRatio);

  // 根据缩放比例计算缩放后的宽度和高度
  scaledWidth = imageWidth * scale;
  scaledHeight = imageHeight * scale;

  // 如果缩放后的宽度或高度大于容器的宽度或高度,则重新计算缩放比例
  if (scaledWidth > containerWidth || scaledHeight > containerHeight) {
    const newScale = Math.min(containerWidth / imageWidth, containerHeight / imageHeight);
    scaledWidth = imageWidth * newScale;
    scaledHeight = imageHeight * newScale;
  }

  return { width: scaledWidth, height: scaledHeight };
}

使用方法如下:

const containerWidth = 500; // 容器的宽度
const containerHeight = 300; // 容器的高度
const imageWidth = 800; // 图片的实际宽度
const imageHeight = 600; // 图片的实际高度

const scaledSize = calculateScaledSize(containerWidth, containerHeight, imageWidth, imageHeight);
console.log(scaledSize.width, scaledSize.height); // 输出缩放后的宽度和高度

本资源由随笔博客发布。发布者:五维国度,转载请注明出处:http://blog.suibi.site/archives/4477


本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

(0)
上一篇 2024年 2月 1日 上午9:44
下一篇 2024年 4月 18日 下午2:40

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

在线咨询: QQ交谈

邮件:jctestxcx@163.com

关注微信