JavaScript实现图片等比例缩小的完整代码与逻辑解析

作者：函数茶馆

时间：2026-10-30

本文详细介绍如何使用JavaScript实现图片的等比例缩小功能。通过获取图片原始宽高，计算缩放比例，并动态修改DOM元素的样式属性，确保图片在指定最大宽高中保持原始长宽比。适用于前端开发中对图片进行自适应布局处理的场景。

文章目录

图片等比例缩小的JavaScript实现方案

本文介绍了一种利用JavaScript实现图片等比例缩小的具体方法，旨在为开发者提供可参考的解决方案。

核心代码与缩放逻辑解析


//等比例缩小图片
function changeImg(obj,width,height) {
  var img = new Image();
  img.src = document.getElementById(obj.id).src
  var ys_w = img.width;
  var ys_h = img.height;
  if(ys_w > width || ys_h > height)
  {
    var scale;
    var scale1 = ys_w / width;
    var scale2 = ys_h / height;
    //alert(scale1+","+scale2);
    if(scale1 > scale2)
    {
      scale = scale1;
    }
    else
    {
      scale = scale2;
    }
    document.getElementById(obj.id).style.width = ys_w / scale;
    document.getElementById(obj.id).style.height = ys_h / scale;
  }
}