definire altezza e larghezza immagini in uno slide javascript

[w.ve]

buonasera,
premetto di non avere un'eccellente dimestichezza con javascript.
ho una lista in cui sono presenti delle immagini, cliccando sulle immagini mi si apre un pop-up in cui sono pesenti 2 tabelle, nella prima è presente l'immagine grande e nella seconda tabella ci sono 10 immagini piccole ossia anteprime e cliccando su esse mi cambia l'immagine della tabella 1 in base alla piccola anteprima su cui clicco.
il problema è che queste immagini provengono da un database e non hanno tutte le stesse dimensioni, l'area dell'immagine grande deve contenere le immagini di dimensioni 600 X 400 pixel. devo pertanto ridimensionare le immagini portandole a questa dimensione massima però evitando di storpiare l'immagine stessa.
come posso fare?
posto il codice:

lo script

<script type="text/javascript">
 var dynimages=new Array()
dynimages[0]=['<%=FotoImmob(1)%>', ""] dynimages[1]=['<%=FotoImmob(2)%>', ""] dynimages[2]=['<%=FotoImmob(3)%>', ""] dynimages[3]=['<%=FotoImmob(4)%>', ""] dynimages[4]=['<%=FotoImmob(5)%>', ""] dynimages[5]=['<%=FotoImmob(6)%>', ""] dynimages[6]=['<%=FotoImmob(7)%>', ""] dynimages[7]=['<%=FotoImmob(8)%>', ""] dynimages[8]=['<%=FotoImmob(9)%>', ""] dynimages[9]=['<%=FotoImmob(10)%>', ""] 

var preloadimg="no" 
var optlinktarget=""
var imgborderwidth=0 
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

if (preloadimg=="yes")
{
for (x=0; x<dynimages.length; x++)
{ 

var myimage=new Image() myimage.src=dynimages[x][0] 
}

}
function returnimgcode(theimg){
var imghtml="" if (theimg[1]!="") imghtml='' imghtml+='[img]'+theimg[0]+'[/img]' if (theimg[1]!="") imghtml+='' return imghtml 

} 
function modifyimage(loadarea, imgindex)
{
 if (document.getElementById){
var imgobj=document.getElementById(loadarea) if (imgobj.filters && window.createPopup)
{
 imgobj.style.filter=filterstring imgobj.filters[0].Apply() 
} 
imgobj.innerHTML=returnimgcode(dynimages[imgindex]) if (imgobj.filters && window.createPopup) imgobj.filters[0].Play() return false
} 
} 
</script>

le tabelle:

<table align="center" cellpadding="0" cellspacing="0" border="1" style="border:1px solid #CCCCCC"> 
<tr> 
<td align="center" height="450px" width="650px" class="nobord"> 
<div id="dynloadarea">
<img src=<%=FotoImmob(1)%> height="400" width="600" border="0"/>
</div> 
</td> 
</tr> 
</table> 


 

<table align="center" cellpadding="5" cellspacing="0" style="border:1px solid #CCCCCC"> <tr> 
<% if FotoImmob(1)<>"" then %> 
<td> 
<img src=<%=FotoImmob(1)%> height="100" width="100" border="0"/>

 
</td> 
<% end if %> <% if FotoImmob(2)<>"" then %> 
<td> 
<a href="#" onClick="modifyimage('dynloadarea', 1)"><img src=<%=FotoImmob(2)%> height="100" width="100" border="0"/>
</a>

 
</td> 
<% end if %> <% if FotoImmob(3)<>"" then %> 
<td> 
<a href="#" onClick="modifyimage('dynloadarea', 2)">
<img src=<%=FotoImmob(3)%> height="100" width="100" border="0"/></a>
 </td> <% end if %> <% if FotoImmob(4)<>"" then %> 
<td> 
<img src=<%=FotoImmob(4)%> height="100" width="100" border="0"/>

 
</td> 
<% end if %> <% if FotoImmob(5)<>"" then %> 
<td> 
<img src=<%=FotoImmob(5)%> height="100" width="100" border="0"/>
 
</td> 
<% end if %> <% if FotoImmob(6)<>"" then %>
<td>
<img src=<%=FotoImmob(6)%> height="100" width="100" border="0"/>
 </td> <% end if %> <% if FotoImmob(7)<>"" then %> 
<td> 
<a href="#" onClick="modifyimage('dynloadarea', 6)"><img src=<%=FotoImmob(7)%> height="100" width="100" border="0"/>
</a>

 
</td>
<% end if %> <% if FotoImmob(8)<>"" then %> 
<td> 
<a href="#" onClick="modifyimage('dynloadarea', 7)"><img src=<%=FotoImmob(8)%> height="100" width="100" border="0"/>
</a>


</td>
 <% end if %> <% if FotoImmob(9)<>"" then %> 
<td> 
<a href="#" onClick="modifyimage('dynloadarea', 8)"><img src=<%=FotoImmob(9)%> height="100" width="100" border="0"/>
</a>

 
</td> <% end if %> <% if FotoImmob(10)<>"" then %> 
<td> 
<a href="#" onClick="modifyimage('dynloadarea', 9)">
<img src=<%=FotoImmob(10)%> height="100" width="100" border="0"/>
</a>

 
</td> 
<% end if %> 
</tr> 
</table>

grazie mille

[cavicchiandrea]

Forse usando crop (è possibile sia in css che in js) che "ritaglia" visivamente le immagini senza deformarle, come integrarlo nelle pagine non saprei, prova a documentarti e fai delle prove.

[w.ve]

mi sono informata sul crop però con questa funzione io ritaglio l'immagine invece io dovrei solo mettere come height 400px di altezza e come widht 600px di larghezza. ma non so come fare.
quella è la via più semplice secondo me, invece per fare una cosa più pulita dovrebbe ridimensionarmi l'immagine più o meno con queste dimensioni senza però rovinare l'immagine.

qualche idea?
grazie!

[cavicchiandrea]

Puoi:
-Ridimensionare un immagine lato server
-Rimpicciolire forzatamente (impostando un parametro cosi non deforma) [img]percorso/foto[/img] puoi usare height/width indifferentemente
-Ritagliare con crop