Ridimensionare le immagini

cavaliere123

Utente Attivo
31 Lug 2012
415
0
0
Buona sera anzi buona notte.... e ben ritrovati a tutti.
E prima del meritato riposo ho un aiuto da chiedervi gentilmente.

Ho uno script già abbondantemente visionato e corretto da voi per le immagini in una bacheca, con la particolarità che se si clicca su una immagine piccola, questa si ingrandisce e ciò avviene con la function :

HTML:
 function grande(img) {  
                var n = document.getElementsByTagName('img').length;           
                var elemento = document.getElementById(img);

                for(var i = 1; i <= n; i++) {
                    
                    if(img == "img" + i) {                        
                        elemento.style.width = 536 + "px";
                        elemento.style.height = 640 + "px";
                         document.getElementById("tex" + i).style.display="none";
                          document.getElementById("text" + i).style.display="block";
                              
     if(immagint[i]=="") { document.getElementById("immagaint"+i).style.display="none"; document.getElementById("textins" + i).style.display="none"; } else {  document.getElementById("immagaint"+i).style.display="block"; document.getElementById("textins" + i).style.display="block";}
                      } else {
                        document.getElementById("fot" + i).style.display="none";

                        }
                }        
       
            }
Ora lasciando perdere i vari display none e block veniamo alle dimensione dell'immagine da me prefissati...
Per certe immagini va benissimo quella dimensione ma per altre no... si modificano specialmente sul lato della lunghezza e vengono deformate.... Mi chiedevo se ci fosse un metodo che ponesse la dimensione width ben prefissata ma la lunghezza della foto dovrebbe in automatico essere proporzionata alla larghezza.... e quindi diversa da immagine a immagine.
Spero di essere stato chiaro e grazie in anticipo per le eventuali risposte.
Buona domenica a tutti :)
Con stima Domenico.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao.
imposta la dimensione in px solo al width
 

cavaliere123

Utente Attivo
31 Lug 2012
415
0
0
Salve Criric, se faccio cosi si allunga solo orizzontalmente.... e quindi si deforma in modo inguardabile :)
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.039
146
63
PR
www.borgo-italia.it
ciao
in php saprei farlo, ma in js no.
non c'è in js una funzione che legga la w e una la h dell'immagine?
se si poi calcoli il rapporto e imposti la nuova w e h
 

cavaliere123

Utente Attivo
31 Lug 2012
415
0
0
Ciao Borgo si che c'è.... sarebbe del tipo questa :

HTML:
        var larghezza = document.getElementById(img).width;

	var altezza = document.getElementById(img).height;
Dove img chiaramente è L'immagine considerata....
Io in teoria c'è l'ho la soluzione, cioè se a priori ho l'immagine grande quanto mi serve.. dovrei solo dire allo script falla comparire con la larghezza e altezza definita.... ma poi lo stesso problema l'avrei con la rispettiva più piccola e non vorrei caricare due immagini ogni volta con dimensioni diverse...... :(
Non so se sono stato chiaro....
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
io intendevo cosi
Codice:
elemento.style.height = "auto";
ma non ho testato magari non funziona
 

cavaliere123

Utente Attivo
31 Lug 2012
415
0
0
Allora il procedimento matematico è il seguente... ammettiamo che voglia diminuirlo del 40%

dato le dimensioni originarie con :

HTML:
 var larghezza = document.getElementById(img).width;

	var altezza = document.getElementById(img).height;
basterebbe fare :

HTML:
var nuovalarghezza = larghezza / 40*100

var nuovaaltezza = altezza / 40*100
Ma il risultato se esce con la virgola dovrebbe approssimarlo per eccesso sino al prossimo intero.
Come ragionamento è logico ??
 

cavaliere123

Utente Attivo
31 Lug 2012
415
0
0
Wow funziona.... l'immagine è proporzionata :)

Adesso il problema per la piccola immagine... quella la imposto con il CSS e dico

HTML:
.dim ( width:90px;
         height:100px; )
Funziona se metto cosi ??

HTML:
.dim ( width:90px;
         height:"auto" )
 

cavaliere123

Utente Attivo
31 Lug 2012
415
0
0
Siiiiiiii, funziona lo stesso.....

Ma solo per curiosità, il procedimento matematico da me imposto è proprio errato ??

Grazieeeeee davvero come sempre :)
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.039
146
63
PR
www.borgo-italia.it
ciao
per adattare un' immagine alla grandezza richiesta potresti fare così, anche se il tuo ragionamento fila

Codice:
//....
var larghezza = document.getElementById(img).width;
var altezza = document.getElementById(img).height;
var lar_rich = 120;
var alt_rch = 80;
var rap= min(lar_rich/larghezza, alt_rch/altezza);
var new_lar= round(larghezza*rap);
var new_alt= round(altezza*rap);
//ecc...
non so se si usano così le funzioni o se si deve usare (es per round) Math.round
 

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Allora il procedimento matematico è il seguente... ammettiamo che voglia diminuirlo del 40%

dato le dimensioni originarie con :

HTML:
 var larghezza = document.getElementById(img).width;

	var altezza = document.getElementById(img).height;
basterebbe fare :

HTML:
var nuovalarghezza = larghezza / 40*100

var nuovaaltezza = altezza / 40*100
Ma il risultato se esce con la virgola dovrebbe approssimarlo per eccesso sino al prossimo intero.
Come ragionamento è logico ??
Ciao,

il calcolo della percentuale è scritta al contrario prima dividi / 100 dopo moltiplichi * XX

no

Codice:
var nuovalarghezza = larghezza / 40*100

var nuovaaltezza = altezza / 40*100
ma

Codice:
var nuovalarghezza = larghezza / 100 * 40

var nuovaaltezza = altezza / 100 * 40
Per risultati con decimale usa Math.round()

Codice:
var nuovalarghezza = Math.round(larghezza / 100 * 40)

var nuovaaltezza = Math.round(altezza / 100 * 40)

Codice:
.dim ( width:90px;
         height:"auto" )
auto senza doppi apici e usa le graffe {} non le tonde ()

Codice:
.dim { width:90px;
         height:auto 
}
Esempio di ridimensionamento per w o per h

Per width fisso a 200px, ridimensiona height

Codice:
<img src="immagine.jpg" 
onload="w=this.width; h=this.height; if(w>200||h>200) if(w>h) {h=h*200/w;w=200} else {w=w*200/h;h=200};this.width=w;this.height=h">
Per height fisso a 200px, ridimensiona width

Codice:
<img src="immagine.jpg" 
onload="w=this.width; h=this.height; if(w>200||h>200) if(w<h) {h=h*200/w;w=200} else {w=w*200/h;h=200};this.width=w;this.height=h">

Valeria.
 

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Ciao,

con una immagine di 160x144px il PHP quele sarebbe il risultato.

Valeria.
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.039
146
63
PR
www.borgo-italia.it
ciao vale
cosa intendi per risultato di una 160x144?
con php se l'immagine è piu grande la riduce (effettivamente), se piu piccola no e la riduce in funzione del rapporto minimo tra le grandezze richieste e le reali.
poi Math.min(x,y) non è anche una funzione js?
 

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Ciao,

Math.nin(20,10) visualizza il numero più piccolo 10 ma non se ci sono operazioni

Math.min

se usi Math.min restituisce 89x80 su una immagine di 160x144

vuoi che se superiori a 120x80 vengono ridimensionate a quelle misure?


Valeria.
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.039
146
63
PR
www.borgo-italia.it
ciao
il mio comunque è solo un interesse accademico (il php che uso funzia perfettamente), anche perche le riduce effettivamente, mentre il js riduce solo la visualizzazione e l'immagine da 2000kb rimane di 2000kb
Codice:
//....
var larghezza = document.getElementById(img).width;
var altezza = document.getElementById(img).height;
var lar_rich = 120;
var alt_rch = 80;
var r_w=lar_rich/larghezza;
var r_h=alt_rich/altezza;
var rap= Math.min(r_w, r_h);// se non accetta il calcolo almeno due varibili si spero, altrimenti min non servirebbe a un...
if(rap < 1){
var new_lar= Math.round(larghezza*rap);
var new_alt= Math.round(altezza*rap);
}else{
var new_lar= larghezza;
var new_alt= altezza;
}
//e qui usare le new_lar e new_alt per visualizzare img ridimensionata se serve
//ecc...
 

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Ciao borgo,

var lar_rich = 120;
var alt_rch = 80;
var r_w=lar_rich/larghezza;
var r_h=alt_rich/altezza;


Codice:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<script type="text/javascript">
window.onload=function(){
var larghezza = document.getElementById("img").width;
var altezza = document.getElementById("img").height;
var lar_rich = 120;
var alt_rich = 80;
if(larghezza < lar_rich || altezza < alt_rich){
var r_w=lar_rich/larghezza;
var r_h=alt_rich/altezza;
}else{
larghezza=lar_rich;
altezza=alt_rich;
}
var rap= Math.min(r_w, r_h);// se non accetta il calcolo almeno due varibili si spero, altrimenti min non servirebbe a un...
if(rap < 1){
var new_lar= Math.round(larghezza*rap);
var new_alt= Math.round(altezza*rap);
}else{
var new_lar= larghezza;
var new_alt= altezza;
}
document.getElementById("img").width=new_lar;
document.getElementById("img").height=new_alt;
}
</script>


</head>
<body> 
<img id="img" src="http://users10.jabry.com/vale2/relax.jpg" title="titolo" alt="testo alternativo" /> <img src="http://users10.jabry.com/vale2/relax.jpg" title="titolo" alt="testo alternativo" /> 


</body>
</html>
online

http://users10.jabry.com/vale2/resize.html

Valeria.
 
Ultima modifica: