Ridimensionare le immagini

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
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
416
0
16
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.046
150
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
416
0
16
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
416
0
16
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
416
0
16
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
416
0
16
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.046
150
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.
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
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.046
150
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:
Discussioni simili
Autore Titolo Forum Risposte Data
A [WordPress] Ridimensionare immagini preview della fotogallery WordPress 8
A Ridimensionare immagini in PHP PHP 6
M ridimensionare le immagini PHP 2
M ridimensionare immagini al volo ASP.NET 1
S Ridimensionare Immagini online PHP 8
M Script per ridimensionare immagini PHP 0
M ridimensionare un'immagine per ottenere una thumbnail PHP 4
marino51 non riesco a caricare un allegato percgè non riesco a ridimensionare la finestra Supporto Mr.Webmaster 0
braccobaldo [illustrator CC] come ridimensionare lo spessore di una traccia selezionata Webdesign e Grafica 1
otto9due Funzione per ridimensionare div in base alla risoluzione schermo.. Javascript 5
Z Script per aprire video youtube sia apre a schermo intero e poi ridimensionare in automatico Javascript 1
M Frame noresize [Era: Frame non che non si può ridimensionare] HTML e CSS 1
metalgemini Ridimensionare i DIV con contenuto variabile HTML e CSS 1
A Foto da ridimensionare Photoshop 5
V ridimensionare larghezza forma + aumento dimensione caratteri Flash 1
S ridimensionare pannello scelta HTML e CSS 0
helpdesk ridimensionare immagine da hd con php PHP 8
helpdesk ridimensionare immagine PHP 9
Y ridimensionare un'immagine PHP 18
M [ridimensionare html+flash] Javascript 0
max1850 Dreamweaver: ridimensionare i campi testo Webdesign e Grafica 1
P Ridimensionare immagine PHP 1
L problema nel ridimensionare un immagine... Classic ASP 2
W ridimensionare una finestra del browser HTML e CSS 2
S Ridimensionare un Frame HTML e CSS 1
S Ridimensionare un Frame Javascript 0
F ridimensionare automaticamente Javascript 1
S ridimensionare una immagine con javascript Javascript 0
S [VB.NET]: Coordinate immagini dentro una PictureBox Visual Basic 0
G Perché il mio sito su Google news fa vedere le immagini degli articoli la mia foto profilo? WordPress 1
M Immagini non usate WordPress 0
elmonarca77 Utilizzo e licenze immagini Webdesign e Grafica 4
S Risoluzione Immagini e Connessione Joomla 0
G Il mio sito dopo aver abilitato l'ssl non visualizza le immagini con indirizzi senza ssl HTML e CSS 0
A WordPress e immagini Hosting 0
Y RITAGLIO IMMAGINI Javascript 0
R Immagini html HTML e CSS 2
E Come gestire al meglio le immagini legno grande formato Photoshop 0
M Random Immagini + Testi PHP 13
L form immagini per il database PHP 0
Ricky80 Coordinazione immagini HTML e CSS 4
P Percorsi e immagini. PHP 0
N Indicizzazione immagini su Google Google Search Console 0
L Import Immagini piattaforma IONIC Sviluppo app per Android 0
L Import massivo di immagini in tabelle piattaforma IONIC Presentati al Forum 1
P Script upload immagini jQuery 0
E Salvare immagini PHP 0
S problema salvataggio immagini Photoshop 0
R Immagini scontornate: che formato? HTML e CSS 4
A Sovrapposizione Immagini Photoshop 0

Discussioni simili