点击按钮时如何调整图片大小以适配Anki滚动容器高度？

嘿，我来帮你搞定这个Anki闪卡的笔顺图适配问题！你已经搭建好了水平滚动容器的基础框架，现在的核心痛点是图片没法自动适配容器高度，导致要么出现多余的纵向滚动条，要么图片被裁剪。咱们一步步调整代码来解决这个问题：

问题根源分析 #

你之前的代码尝试修改父容器strokeOrderPictures的高度，但实际上需要调整的是容器内每张图片的尺寸；而且直接修改height可能因为图片固有尺寸的优先级问题不生效，用transform: scale()会更可靠。另外，获取图片高度时用naturalHeight能拿到图片的真实原始高度，避免样式干扰。

修改后的完整代码 #

下面是调整后的HTML和JavaScript代码，关键修改点我已经标注出来了：

<span style="font-size: 20px; "> {{Meaning}} </span>
<hr id=answer>
<tts style="display:none" service="android" voice="ja_JP">{{Expression}}</tts>
<span style="font-size: 40px; "> {{furigana:Reading}} </span>
<br>
<div id = "output"></div>
<br>
<button onclick="showHideStrokeOrder()">Stroke Order</button>
<center>
<!-- 确保overflow-y:hidden完全禁用纵向滚动，避免多余滚动条 -->
<div id="scrollboxStrokeOrder" style="border:1px solid black;height:150px;width:100%;white-space:nowrap;overflow-y:hidden;overflow-x:auto;display:none">
<!-- 给图片容器加flex布局，让图片横向排列更规整，间距可控 -->
<div id='strokeOrderPictures' style="display: flex; align-items: flex-start; gap: 8px;">{{Stroke Order Diagram}}</div>
</div>
</center>
<script>
function showHideStrokeOrder() {
var out = document.getElementById("output");
var scrollbox = document.getElementById("scrollboxStrokeOrder");
const isHidden = scrollbox.style.display === "none";
scrollbox.style.display = isHidden ? "block" : "none";

// 只有当容器显示时才调整图片尺寸
if (!isHidden) {
  const maxHeight = parseFloat(scrollbox.style.height);
  // 获取容器内所有的笔顺图图片
  const strokeImgs = document.querySelectorAll('#strokeOrderPictures img');
  
  strokeImgs.forEach(img => {
    // 获取图片的真实原始高度
    const originalHeight = img.naturalHeight;
    if (originalHeight > maxHeight) {
      // 计算缩放比例，确保图片高度不超过容器
      const scaleRatio = maxHeight / originalHeight;
      // 使用transform缩放，同时设置原点避免偏移
      img.style.transform = `scale(${scaleRatio})`;
      img.style.transformOrigin = 'top left';
      // 同步设置高度，确保容器能正确识别尺寸
      img.style.height = `${maxHeight}px`;
      img.style.width = 'auto';
    } else {
      // 如果图片本身比容器小，恢复默认样式
      img.style.transform = '';
      img.style.height = '';
      img.style.width = '';
    }
  });
  
  // 更新提示信息，方便调试
  out.innerHTML = `容器高度：${maxHeight}px，已自动适配所有笔顺图`;
} else {
  // 隐藏容器时清空提示
  out.innerHTML = '';
}
}
</script>

关键修改说明 #

• 图片容器布局优化：给strokeOrderPictures添加display: flex，让图片横向排列更整齐，还能通过gap控制图片间距，比默认的inline布局更可控。
• 精准获取图片高度：用naturalHeight代替height，确保拿到图片的真实原始尺寸，避免样式修改带来的误差。
• 针对每张图片调整：通过querySelectorAll遍历所有图片，逐一适配容器高度，而不是修改父容器样式。
• 可靠的缩放方式：使用transform: scale()来调整图片大小，同时设置transformOrigin: top left，保证图片缩放后不会偏离原来的位置。

这样修改后，当你点击"Stroke Order"按钮时，所有笔顺图都会自动缩放并适配容器的150px高度，同时保持横向滚动的功能，不会出现纵向滚动或者图片被裁剪的问题啦！

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