如何重置jQuery设置的元素宽度？解决图片重复上传缩放问题

这个问题的核心在于，你第一次用$('img').width(tmp)设置宽度后，img元素会被添加一个inline样式的width属性，后续上传新图片时，如果不清除这个样式，浏览器会直接沿用这个宽度值，导致你获取到的不是新图片的原始尺寸。

这里有两个可靠的解决思路，推荐第二个更简洁的方案：

方案一：先重置图片样式，再计算新尺寸 #

每次上传新图片前，先清除img元素上的inline宽度样式，让新图片加载时恢复原始尺寸，再基于原始尺寸计算：

// 替换新图片src之前，先重置样式
$('img').removeAttr('style');
// 这里替换成你的新图片src赋值逻辑
$('img').attr('src', newUploadedImageSrc);

$('img').imagesLoaded().done(function(){
  // 此时获取的是图片原始宽度
  const originalWidth = $('img').width();
  const tmp = originalWidth * 0.614;
  $('img').width(tmp);
});

方案二：直接获取图片原始尺寸（推荐） #

利用HTML5提供的naturalWidth属性，它能直接返回图片文件本身的原始宽度，完全不受元素当前样式的影响，不管你之前有没有设置过宽度，都能拿到最准确的原始尺寸：

$('img').imagesLoaded().done(function(){
  // 注意：$('img')[0]拿到原生DOM元素，才能访问naturalWidth
  const originalWidth = $('img')[0].naturalWidth;
  const tmp = originalWidth * 0.614;
  $('img').width(tmp);
});

如果是处理多张图片的情况，记得用each遍历每个元素：

$('img').imagesLoaded().done(function(){
  $('img').each(function(){
    const originalWidth = this.naturalWidth;
    const tmp = originalWidth * 0.614;
    $(this).width(tmp);
  });
});

naturalWidth在所有现代浏览器都支持，兼容性完全不用担心，这个方案不需要额外的重置操作，逻辑更清晰也更可靠。

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