Изменение размера элемента с переполнением: автоматически с учетом полос прокрутки

Question

Мне нужно сделать просмотрщик изображений: слева есть изменяемый размер TD с div и image / video. В правом ТД есть комментарии. Размеры изображений изменяются таким образом, чтобы эти панорамные изображения с высоким соотношением сторон можно было просматривать с помощью полосы прокрутки (горизонтальной или вертикальной), но полосы прокрутки показывались только при необходимости. Вопрос в том, как правильно рассчитать ширину / высоту.

Вот структура документа, с которой я работаю:

<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. если контейнер меньше требуемого размера, это означает, что имеются полосы прокрутки, поэтому другое измерение требует расширения. Попробуйте расширить его.