javascript - 调整溢出元素的大小 :auto taking scrollbars into account

Question

我需要制作一个图像查看器:左侧有一个可调整大小的 TD，其中包含 div 和图像/视频。在正确的 TD 中有注释。调整图像大小，以便可以使用滚动条(水平或垂直)查看具有高宽高比的全景图，但滚动条仅在必要时显示。问题是如何计算正确的宽度/高度。

这是我使用的文档结构:

<table><tr>
   <td id="container" width="100%" style="height: 100%">
       <div id="frame" style="border: 7px solid; width: 200px; height: 150px; overflow: auto">
           <img id="content" src="..." />
       </div>
   </td>
   <td width="200">some comments</td>
</tr></table>

我想调整 #frame 的大小，使其像 min(#container 的大小，max(#frame 的大小，#content 的大小))。换句话说，要调整它的大小，使每个维度在 #container 内最大化，但在 #content 和 #frame 之间没有空白>.

我在每个维度上进行最小(最大...)计算，同时考虑到边框、填充和边距。但随后它会留下滚动条。

我尝试检查 clientHeight 和 style.height 之间的差异，如果 #frame 仍然小于 #container，则添加差异。但这不太可靠，因为滚动条会单独或一起消失。

有现成的解决方案吗？

Answer 1

我得出以下解决方案:

1. 计算出元素的大小、它的装饰、可用空间
2. 将容器调整为内容大小，但不超过父级
3. 如果容器小于所需的大小，这意味着有滚动条，因此其他维度需要扩展。尝试扩展它。