Ridimensionare le immagini

cavaliere123 · 14 Ott 2012

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 · 14 Ott 2012

Ciao.
imposta la dimensione in px solo al width

cavaliere123 · 14 Ott 2012

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

borgo italia · 14 Ott 2012

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 · 14 Ott 2012

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 · 14 Ott 2012

io intendevo cosi

Codice:

elemento.style.height = "auto";

ma non ho testato magari non funziona

cavaliere123 · 14 Ott 2012

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 · 14 Ott 2012

Adesso provo

cavaliere123 · 14 Ott 2012

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 · 14 Ott 2012

Siiiiiiii, funziona lo stesso.....

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

Grazieeeeee davvero come sempre

borgo italia · 15 Ott 2012

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 · 15 Ott 2012

cavaliere123 ha scritto:
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.

borgo italia · 15 Ott 2012

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

Vale2 · 15 Ott 2012

borgo italia ha scritto:
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 · 15 Ott 2012

Ciao,

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

Valeria.

borgo italia · 15 Ott 2012

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 · 15 Ott 2012

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 · 15 Ott 2012

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 · 15 Ott 2012

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.

borgo italia · 15 Ott 2012

ciao
perfect

Ridimensionare le immagini

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Utente Attivo

Utente Attivo

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Discussioni simili

Privacy & Transparency

Privacy & Transparency