调整具有溢出的元素：自动考虑滚动条

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(size of #container, max(size of #frame, size of #content))。换句话说，要调整它的大小，以便每个尺寸都在#container以内最大化，但在#content和#frame之间没有空格。

我在每个维度上都做这个min（max ...）计算，考虑边界，填充，边距。但它然后离开滚动条。

我尝试检查clientHeight & style.height之间的差异，并在#frame仍小于#container时加上差异。但是这不是很可靠，因为单独或一起消失的滚动条。

有没有现有的解决方案？

Answer 1

我来到了以下解决方案：

1. 图到元件的尺寸，它的装饰，可用空间
2. 调整容器的内容大小，但不超过父
3. 如果容器的尺寸小于所需尺寸，则表示存在滚动条，因此其他尺寸需要扩展。尝试扩展它。