无法使用scale()时，如何通过jQuery animate实现图片从700%尺寸动画还原至原始自适应尺寸

既然你已经明确知道图片的实际原始尺寸（1024px × 570px），这就是解决问题的关键突破口——我们可以直接用这个固定比例来计算目标尺寸，完全绕开隐藏状态下无法获取DOM尺寸的问题。核心思路是：先算出图片在原始CSS配置下的实际渲染尺寸，再从当前的700%缩放状态动画过渡到这个尺寸，最后恢复原始CSS属性，保证图片比例不变。

具体步骤和代码实现 #

1. 核心逻辑梳理

• 原始CSS的本质是让图片按自身比例填满容器（min-width:100%/min-height:100%），所以需要先对比容器宽高比和图片宽高比，确定原始状态下图片的实际宽高。
• 先把图片从width:700%/height:700%的相对尺寸状态转为固定像素尺寸，再动画过渡到目标固定尺寸，最后恢复原始的auto/min-*属性，避免变形。

2. jQuery代码实现

// 图片原始宽高比（已知实际尺寸，直接计算）
const originalImgRatio = 1024 / 570;
const $container = $('.backone');
const $img = $('.backone > img');

// 先显示图片（如果之前处于隐藏状态）
$img.show();

// 获取当前容器的宽高
const containerWidth = $container.width();
const containerHeight = $container.height();
const containerRatio = containerWidth / containerHeight;

// 计算图片当前的实际像素尺寸（根据之前设置的是width还是height 700%）
let currentImgWidth, currentImgHeight;
if ($img.css('width') === '700%') {
  currentImgWidth = containerWidth * 7;
  currentImgHeight = currentImgWidth / originalImgRatio;
} else {
  currentImgHeight = containerHeight * 7;
  currentImgWidth = currentImgHeight * originalImgRatio;
}

// 计算原始状态下图片的目标像素尺寸
let targetImgWidth, targetImgHeight;
if (containerRatio > originalImgRatio) {
  // 容器比图片宽，原始状态下图片以高度填满容器
  targetImgHeight = containerHeight;
  targetImgWidth = targetImgHeight * originalImgRatio;
} else {
  // 容器比图片高，原始状态下图片以宽度填满容器
  targetImgWidth = containerWidth;
  targetImgHeight = targetImgWidth / originalImgRatio;
}

// 先重置图片的CSS为固定尺寸，避免动画过程中受min-width/min-height干扰
$img.css({
  'width': currentImgWidth,
  'height': currentImgHeight,
  'min-width': 'unset',
  'min-height': 'unset',
  'transform': 'translateX(-50%)' // 保持居中对齐
});

// 执行动画过渡到目标尺寸（可调整动画时长，这里是600ms）
$img.animate({
  width: targetImgWidth,
  height: targetImgHeight
}, 600, function() {
  // 动画结束后恢复原始CSS配置
  $(this).css({
    'width': 'auto',
    'height': 'auto',
    'min-width': '100%',
    'min-height': '100%'
  });
});

为什么之前的方法失效？ #

• 隐藏状态获取尺寸无效：但你已知图片原始尺寸，直接用这个比例就绕开了DOM加载的限制。
• CSS动画到100%变形：因为100%是容器的尺寸，不是图片按自身比例缩放后的尺寸，自然会破坏比例。
• jQuery animate计算错误：之前可能没先把图片转为固定像素尺寸，导致animate无法正确识别过渡目标，最终计算偏差。

额外注意点 #

如果图片的原始尺寸可能动态变化（比如不同场景用不同图），可以在页面初始化时先获取图片的naturalWidth和naturalHeight（即使图片隐藏，只要已加载到DOM就能获取），代码如下：

// 初始化时获取图片原始自然尺寸
let originalImgWidth, originalImgHeight;
$img.on('load', function() {
  originalImgWidth = this.naturalWidth;
  originalImgHeight = this.naturalHeight;
});
// 之后用originalImgWidth/originalImgHeight计算比例即可

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