Ridimensionare le immagini

[cavaliere123]

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 :

 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]

Ciao.
imposta la dimensione in px solo al width

 

[cavaliere123]

Salve Criric, se faccio cosi si allunga solo orizzontalmente.... e quindi si deforma in modo inguardabile

 

[borgo italia]

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]

Ciao Borgo si che c'è.... sarebbe del tipo questa :

        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]

io intendevo cosi

elemento.style.height = "auto";

ma non ho testato magari non funziona

 

[cavaliere123]

Allora il procedimento matematico è il seguente... ammettiamo che voglia diminuirlo del 40%

dato le dimensioni originarie con :

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

	var altezza = document.getElementById(img).height;

basterebbe fare :

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]

Adesso provo

 

[cavaliere123]

Wow funziona.... l'immagine è proporzionata

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

.dim ( width:90px;
         height:100px; )

Funziona se metto cosi ??

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

 

[cavaliere123]

Siiiiiiii, funziona lo stesso.....

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

Grazieeeeee davvero come sempre

 

[borgo italia]

ciao
per adattare un' immagine alla grandezza richiesta potresti fare così, anche se il tuo ragionamento fila

//....
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]

Allora il procedimento matematico è il seguente... ammettiamo che voglia diminuirlo del 40%

dato le dimensioni originarie con :

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

	var altezza = document.getElementById(img).height;

basterebbe fare :

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

var nuovalarghezza = larghezza / 40*100

var nuovaaltezza = altezza / 40*100

ma

var nuovalarghezza = larghezza / 100 * 40

var nuovaaltezza = altezza / 100 * 40

Per risultati con decimale usa Math.round()

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

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

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

auto senza doppi apici e usa le graffe {} non le tonde ()

.dim { width:90px;
         height:auto 
}

Esempio di ridimensionamento per w o per h

Per width fisso a 200px, ridimensiona height

<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

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

 

[borgo italia]

ciao vale
e per fare come avevo detto io? col metodo mutuato da php?

 

[Vale2]

ciao vale
e per fare come avevo detto io? col metodo mutuato da php?

Ciao borgo,

il metodo min in PHP equivale a visualizza il minore dei due numeri.

Valeria.

 

[Vale2]

Ciao,

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

Valeria.

 

[borgo italia]

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]

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]

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

//....
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]

Ciao borgo,

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

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

 

[borgo italia]

ciao
perfect