Ottenere la dimensione di un DIV.

[alcio74]

Premessa
Salve a tutti.
Sono un PHPista convinto ed è la prima volta che scrivo in questo forum, perché (pur non essendo un drago) non avevo mai avuto problemi con JavaScript.

Scenario
Voglio effettuare il dimensionamento dinamico di una immagine all'interno di un DIV.
L'immagine è prelevata da PHP nel DB e ne vengono estratte larghezza ed altezza.
I dati li passo a JS.
La mia idea di base era la seguente: ottengo la dimensione del DIV e controllo se le dimensioni della foto sono minori o uguali allo spazio del box in cui viene inserita l'immagine.
Se inferiori, imposto lo STYLE inline dell'immagine al 100% per occupare tutto lo spazio, altrimenti trovo la percentuale di ridimensionamento e nello stesso STYLE inline vado a mettere la percentuale così ottenuta.
Il box in questione però ha la larghezza non dichiarata da CSS, in quanto il layout è fluido, per cui quando vado a recuperarla non ottengo valori e lo script va a pallino.

Il codice.
Questo è il codice che ho usato (misto con PHP, che ometterò in questa sede):

<script type="text/javascript" language="JavaScript">
<!--
    var mydiv = document.getElementById("box_links"); 
    var spazio = mydiv.innerWidth;
    alert("Larghezza BOX: "+spazio);
<?php    
    echo "\tvar w_img = $w;\n";
    echo "\tvar h_img = $h;\n";
    echo "\tvar foto = \"public/editoriali/$foto\";\n";
?>    
    if(spazio >= w_img) {
        var w_perc = '100%';
        var h_perc = '100%';
    } else {
         var rapp = w_img/h_img;
        var w_perc = spazio+'px';
        var h_perc = Math.round((h_img*spazio/w_img))+'px';
    }
    alert("width:"+w_perc+";height:"+h_perc);
    document.write("<img align=\"center\" style=\"width:"+w_perc+";height:"+h_perc+";\" src=\""+foto+"\" />
");
//-->
</script>

Conclusioni
Il metodo è funzionante, se al posto del GetElement, per trovare le dimensioni del BOX uso Screen.Width a cui tolgo i valori di larghezza delle due colonne laterali (a dimensioni fisse), però quest'ultimo valore è sempre riferito allo schermo, quindi nel caso l'utente ridimensioni il browser (non a tutto schermo), l'immagine rimane di dimensioni fisse ed il layout si incasina.
Avete per caso qualche idea su come posso risolvere?

[alcio74]

Sono riuscito a risolvere da me con il seguente codice:

<script type="text/javascript" language="JavaScript">
<!--
    var spazio = document.body.clientWidth - 220 - 190;
<?php    
    echo "\tvar w_img = $w;\n";
    echo "\tvar h_img = $h;\n";
    echo "\tvar foto = \"public/editoriali/$foto\";\n";
?>    
    if(spazio >= w_img) {
        var h_perc = '100%';
    } else {
         var rapp = Math.round(spazio/w_img*100);
        var h_perc = rapp+'%';
    }
    document.write("<img style=\"width:100%;height:"+h_perc+";margin: 5px auto;\" src=\""+foto+"\" />
");
//-->
</script>

In questo modo l'immagine rimane sempre proporzionata alla dimensione del browser e sempre con le giuste proporzioni tra larghezza e grandezza.

Grazie lo stesso a tutti quelli che hanno già letto questo post.