Redimensionner un élément avec débordement: prise en compte automatique des barres de défilement

Question

Je dois créer une visionneuse d'image: à gauche, il y a un TD redimensionnable avec la div et l'image/vidéo. Dans le bon TD, il y a des commentaires. Les images sont redimensionnées de sorte que les vues panoramiques, avec des proportions élevées, puissent être visualisées avec une barre de défilement (horizontale ou verticale), mais les barres de défilement ne sont affichées que lorsque cela est nécessaire. Le problème est de savoir comment calculer la largeur/hauteur correcte.

est ici la structure du document que je travaille avec:

<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> 

Je veux redimensionner #frame pour que ce soit comme min(size of #container, max(size of #frame, size of #content)). En d'autres termes, pour le redimensionner de sorte que chaque dimension ait été maximisée à l'intérieur de #container, mais il n'y avait pas d'espace blanc entre #content et #frame. Je fais ce calcul min (max ...) sur chaque dimension, en tenant compte des bordures, des paddings, des marges. Mais ensuite il laisse des barres de défilement.

j'essaie de vérifier la différence entre clientHeight & style.height et ajouter la différence si #frame est encore plus petite que #container. Mais ce n'est pas très fiable à cause des barres de défilement qui disparaissent seules ou ensemble.

Existe-t-il une solution existante?

Answer 1

Je suis venu à la solution suivante:

1. figure la taille de l'élément, de c'est des décorations, l'espace disponible
2. redimensionnez le conteneur à la taille du contenu, mais pas plus que parent
3. si le conteneur est plus petit que la taille souhaitée, cela signifie qu'il y a des barres de défilement, de sorte que l'autre dimension a besoin d'extension. Essayez de l'élargir.