調整具有溢出的元素：自動考慮滾動條

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. 如果容器的尺寸小於所需尺寸，則表示存在滾動條，因此其他尺寸需要擴展。嘗試擴展它。