如何缩放Div内容适配固定尺寸？基于双Div布局的技术问询

嘿，这个需求我之前做类似公式渲染时恰好碰到过，核心思路是先让隐藏容器临时“现身”计算真实尺寸，再通过缩放变换把内容适配到目标容器，具体步骤和代码如下：

核心思路 #

你把#currentExpr强制设为1px尺寸且隐藏，无法直接获取MathML渲染后的真实大小。所以我们需要临时恢复它的自然渲染状态，算出内容实际宽高后计算缩放比例，最后把内容复制到#currentExprFront并应用缩放逻辑。

具体实现代码 #

// 获取两个容器元素
const hiddenExpr = document.getElementById('currentExpr');
const frontExpr = document.getElementById('currentExprFront');

// 适配函数：在MathML内容更新完成后调用
function fitMathMLToContainer() {
  // 第一步：临时修改隐藏容器样式，让它在视口外正常渲染（不影响页面布局）
  hiddenExpr.style.visibility = 'visible';
  hiddenExpr.style.height = 'auto';
  hiddenExpr.style.width = 'auto';
  hiddenExpr.style.position = 'absolute';
  hiddenExpr.style.top = '-9999px';
  hiddenExpr.style.left = '-9999px';

  // 等待浏览器完成MathML渲染（避免获取未渲染的错误尺寸）
  requestAnimationFrame(() => {
    // 获取真实尺寸与目标容器尺寸
    const hiddenRect = hiddenExpr.getBoundingClientRect();
    const frontRect = frontExpr.getBoundingClientRect();

    // 计算宽高方向的缩放比例，取最小值保证内容完全适配容器
    const scaleRatio = Math.min(
      frontRect.height / hiddenRect.height,
      frontRect.width / hiddenRect.width
    );

    // 把处理好的MathML内容复制到目标容器
    frontExpr.innerHTML = hiddenExpr.innerHTML;

    // 应用缩放变换，设置变换原点为左上角避免偏移
    frontExpr.style.transform = `scale(${scaleRatio})`;
    frontExpr.style.transformOrigin = 'top left';

    // 可选：若缩放后需要内容居中，可添加以下样式
    // frontExpr.style.display = 'flex';
    // frontExpr.style.justifyContent = 'center';
    // frontExpr.style.alignItems = 'center';

    // 恢复隐藏容器的原始样式
    hiddenExpr.style.visibility = 'hidden';
    hiddenExpr.style.height = '1px';
    hiddenExpr.style.width = '1px';
    hiddenExpr.style.position = '';
    hiddenExpr.style.top = '';
    hiddenExpr.style.left = '';
  });
}

// 示例：当你从服务器获取到MathML并更新到hiddenExpr后，执行适配
// yourFetchMathMLFunction().then(() => fitMathMLToContainer());

关键细节说明 #

• 临时渲染技巧：用position: absolute和top: -9999px把隐藏容器放到视口外，既不影响页面布局，又能让浏览器正常渲染MathML并计算真实尺寸。
• 等待渲染完成：requestAnimationFrame能确保浏览器完成MathML的渲染，避免拿到未渲染的错误尺寸值。
• 缩放比例计算：同时考虑宽高方向的比例，取最小值保证内容不会超出目标容器边界。
• 变换原点：设置transformOrigin: top left让缩放后的内容从容器左上角对齐，避免出现偏移问题。

内容的提问来源于stack exchange，提问作者pasaba por aqui