JavaScript实现图片等比例缩放限制最大宽高

核心逻辑与目标

该脚本的核心目标是当图片的宽度或高度超过预设上限时，按比例缩小图片，使其恰好符合限制条件。算法遵循“宽度过大先限宽”和“高度过大先限高”的双重判断逻辑，并在交叉超限（即按宽度缩放后高度仍超标）时进行二次修正。

参数配置与准备工作

在使用此函数前，需准备好以下要素：

• thisobj：指向HTML中具体图片元素的DOM对象（如 <img id="myImg" src="...">）。
• limitW：允许显示的最大宽度数值（以像素为单位）。
• limitH：允许显示的最大高度数值（以像素为单位）。

第1步：定义缩放函数

目的：封装通用的图片缩放逻辑，便于在不同场景中复用。

入口：在 <script> 标签内定义全局函数。

动作：编写 imageResize 函数，接收上述三个参数。

参数：thisobj, limitW, limitH。

第2步：处理宽度超限情况

目的：优先检查图片是否超出宽度限制。

入口：获取 thisobj.width（注意这是像素值，非CSS样式宽度）。

动作：若当前宽度大于限制宽度，则执行以下计算：

1. 将新宽度设为限制宽度 newW = limitW。
2. 根据等比例公式计算新高度：newH = parseInt(thisobj.height * newW / thisobj.width)。
3. 检查计算出的新高度是否仍然超过限制高度 limitH。若是，则执行二次修正：
   
   • 将新高度重置为限制高度 newH = limitH。
   • 反向推算对应的宽度：newW = parseInt(thisobj.width * newH / thisobj.height)。

第3步：处理高度超限情况

目的：若宽度未超限但高度超限，则单独针对高度进行处理。

入口：检查 thisobj.height。

动作：若当前高度大于限制高度，则执行以下计算：

1. 将新高度设为限制高度 newH = limitH。
2. 根据等比例公式计算新宽度：newW = parseInt(thisobj.width * newH / thisobj.height)。

第4步：应用新的尺寸

目的：将计算得出的最终宽高赋值回DOM对象。

入口：完成上述所有条件判断后。

动作：直接设置 thisobj.width = newW 和 thisobj.height = newH。

完整代码示例

以下是完整的实现代码，可直接复制使用：

/**
 * 限制图片显示的size.
 * 
 * @param thisobj 图片组件
 * @param limitW 限制宽度大小
 * @param limitH 限制高度大小
 */
function imageResize(thisobj, limitW, limitH) {
  var newW;
  var newH;
  if (thisobj.width > limitW) {
    newW = limitW;
    newH = parseInt(thisobj.height * newW / thisobj.width);
 // 按宽度比例缩放
    if (newH > limitH) {
      newH = limitH;
      newW = parseInt(thisobj.width * newH / thisobj.height);
    }
    thisobj.width = newW;
    thisobj.height = newH;
  } else if (thisobj.height > limitH) {
    newH = limitH;
    newW = parseInt(thisobj.width * newH / thisobj.height);
    thisobj.width = newW;
    thisobj.height = newH;
  }
}

注意事项

• 像素单位：代码中引用的是 .width 和 .height 属性，这代表图片原始的像素宽高，而非CSS渲染后的尺寸。如果图片尚未加载完成，这些属性可能为0或不可用，建议在执行前确保图片已加载（可在 onload 事件中调用）。
• 性能：此方法修改的是HTML属性，浏览器会重新计算布局并绘制图片。对于大量图片，建议仅在初始化时运行一次，或结合 requestAnimationFrame 优化。
• 替代方案：对于现代项目，通常更推荐使用CSS（如 max-width: 100%; height: auto;）来实现响应式图片限制，无需 JavaScript 介入。

以上就是JavaScript限定图片显示大小的详细内容，更多关于JavaScript图片处理的资料请关注本站其它相关文章！