Ciao,
per ridurre percentualmente le immagini puoi utilizzare i selettori CSS width e height che possono essere valorizzati con valori assoluti (in pixel) o % -come peraltro funzionano i relativi attributi del tag IMG-
Tuttavia non è facile ridurre ad una determinata area di visualizzazione, se il rapporto altezza/larghezza dell'immagine non è simile a quello dell'area in questione... ci vuole uno script che, mantenendo le proporzioni, riduca l'immagine affinchè essa possa essere contenuta all'interno dell'area desiderata.
<html>
<body>
<img src="test.jpg" onLoad="resizeImage(this);" style="visibility: hidden;">
</body>
<script>
var MAX_WIDTH = 300 , MAX_HEIGHT = 300;
function resizeImage( ptrImage )
{
ptrImage.title = "Dimensioni originali: " + ptrImage.width + "x" + ptrImage.height;
while( ptrImage.width > MAX_WIDTH || ptrImage.height > MAX_HEIGHT ) {
ptrImage.width -= 10;
}
ptrImage.style.visibility = "visible";
}
</script>
</html>
In questo esempio, durante il processo di resize, viene adottata una riduzione di 10 pixel alla volta; tieni ad ogni modo in buon conto che se lavori con immagini molto grandi, con aree di preview molto piccole, e con pc molto lenti, allora puoi aumentare il passo di riduzione al fine di velocizzare l'algoritmo stesso e dunque il rendering finale della pagina.
Ciao ciao