容器div尺寸变更后，如何实现内部图片等比例无拉伸缩放？

这个需求其实很常见，核心就是保持图片的原始宽高比，让图片在容器内尽可能大但不超出边界，同时绝对不会出现拉伸变形的情况。下面给你两种靠谱的实现方式，按需选择就行：

方法一：用CSS object-fit 属性（推荐，最简单） #

完全不需要复杂的JS计算，直接给图片加几行CSS就能搞定：

.new-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持比例，完整显示在容器内，空白区域留空 */
  /* 如果需要图片填满容器（允许裁剪边缘），把contain换成cover即可 */
}

这样不管你怎么修改容器的宽高，图片都会自动等比例缩放，完美适配容器，而且不会有任何拉伸变形。这个属性除了IE不支持之外，现代浏览器都兼容，属于最省心的方案。

方法二：JavaScript手动计算缩放比例（兼容IE或需要自定义逻辑时用） #

如果必须兼容老浏览器，或者需要更精细的控制，可以用JS手动计算缩放比例：

首先要确保拿到图片的原始真实尺寸，最好在页面加载完成后就存起来：

// 存储图片原始宽高（页面加载完成后获取）
let imgOriginalWidth, imgOriginalHeight;
$(document).ready(function() {
  const $targetImg = $(".new-img");
  // naturalWidth/naturalHeight是图片本身的真实尺寸，不受CSS影响
  imgOriginalWidth = $targetImg[0].naturalWidth;
  imgOriginalHeight = $targetImg[0].naturalHeight;
});

// 你的原有监听逻辑
$(".input1, .input2").on("change",function(){ measurement_change(); });
function measurement_change(){
    // 假设input1是宽度输入框，input2是高度输入框，这里替换成你的实际计算逻辑
    const new_width = $(".input1").val() + "px";
    const new_height = $(".input2").val() + "px";
    const $container = $(".container-div");
    
    // 设置容器新尺寸
    $container.css({
      width: new_width,
      height: new_height
    });

    // 计算缩放比例
    const containerW = $container.width();
    const containerH = $container.height();
    // 分别计算宽、高方向的缩放比例
    const scaleW = containerW / imgOriginalWidth;
    const scaleH = containerH / imgOriginalHeight;
    // 取较小的那个比例，保证图片能完整放进容器
    const finalScale = Math.min(scaleW, scaleH);

    // 设置图片新尺寸
    $(".new-img").css({
      width: imgOriginalWidth * finalScale + "px",
      height: imgOriginalHeight * finalScale + "px"
    });
}

注意事项 #

• 如果图片是动态加载的（比如后期通过JS添加的），要在图片的load事件触发后再获取原始尺寸，不然可能拿到0值
• 用naturalWidth/naturalHeight能保证拿到图片本身的真实尺寸，不会被当前CSS样式干扰

内容的提问来源于stack exchange，提问作者Abilash Erikson