Adattare immagini alla dimensione del monitor

Redevil

Nuovo Utente
31 Dic 2013
4
0
0
Salve,

Premetto che sono alle prime armi con la programmazione in Javascript.
Avrei necessità di adattare alcune immagini alle dimensioni della finestra.... Mi spiego meglio: nel mio caso ho delle immagini di dimensioni YxY e vorrei adattarle alla massima dimensione della finistra aperta sul monitor, diciamo di dimensioni XxX. In modo da dare un'idea di full-screen per ogni immagine.
Nello specifico avrei necessità di adattare tre immagini in altezza.

La mia idea era quella di leggere la dimensione in altezza del monitor tramite
Codice:
window.screen.availHeigt;
Successivamente modificare la relativa classe nel mio file CSS tramite
Codice:
var elemento=document.querySelector(".immagini img");
e
Codice:
elemento.style.heigt=monitorHeigth+"px";
in modo da poter ridimensionare, con le dimensioni del monitor, tutte e tre le immagini.

Vorrei sapere se:
1) L'idea di base è corretta o meno.
2) Il codice che ho scritto può andare bene.

Posto qui sotto il codice completo:
Codice:
function aggiustaAlt() {
	var monitorHeigt=window.screen.availHeigt;
	var elemento=document.querySelector(".immagini img");
             elemento.style.heigt=monitorHeigth;
             return;
}
 
Ultima modifica:

mariosantella.com

Nuovo Utente
8 Mar 2014
24
1
3
l'idea di base funziona , ma devi far partire la funzione quando viene modificata la grandezza della finestra...

2 strade:

1)con le funzioni di timeout controlli se la grandezza cambia (strada da programmatore zozzone :D )
2) oppure se cerchi bene sulle references di Jquery c'è una smart function che si occupa di controllare i ridimensionamenti delle finestre.. ;)

ps

se vuoi che comunque e sempre si riadatti basta l'onload e la logica della funzione che hai utilizzato va bene
 
Discussioni simili
Autore Titolo Forum Risposte Data
felino [CSS][Wordpress] Adattare delle immagini alla dimesione del box contenitore HTML e CSS 2
Juriy APP: Adattare immagini a GIF animata in real time Programmazione 0
W Adattare immagini slideshow a riquadro predefinito Webdesign e Grafica 0
M [Javascript] Adattare immagine di background all'altezza dello smartphone Javascript 1
L [HTML] Adattare bordo al contenuto HTML e CSS 4
D [Javascript] Convertire ed adattare una data Javascript 1
B Adattare testo a cornice HTML e CSS 2
felino Adattare un layout desktop ad un responsive HTML e CSS 9
K Adattare app ad ogni schermo Sviluppo app per Android 1
L Adattare sfondo in base alla risoluzione WordPress 3
P Adattare sito alle varie risoluzioni... HTML e CSS 2
P Risoluzione del sito si può adattare? HTML e CSS 0
V Adattare sito web per tutte le risoluzioni ? HTML e CSS 1
P Adattare sito a diverse risoluzioni HTML e CSS 14
M Adattare script di "form mail con upload file" al mio form mail HTML! PHP 7
S Adattare la pagina web creata ad ogni monitor HTML e CSS 11
C Adattare uno script di altro linguaggio a javascript Javascript 11
matrobriva Adattare classe Odt2Xhtml PHP 2
F [HELP] Adattare al form Visual Basic 0
L Adattare il sito a qualsiasi computer Webdesign e Grafica 4
P Adattare un layer alle varie risoluzioni HTML e CSS 0
D Adattare contenuto a risoluzione utente HTML e CSS 5
G adattare sito con frame a monitor [era:Frame] Webdesign e Grafica 3
M Adattare iFrame HTML e CSS 5
B Adattare tabella a immagine di sfondo con Dreamweaver Cs3 Webdesign e Grafica 3
StefanoITA Adattare il sito alla risoluzione del visitatore HTML e CSS 5
M Adattare sito a risoluzione video [era:help me] HTML e CSS 6
G adattare pagina web a tutte le risoluzioni HTML e CSS 9
C Adattare un filmato a vari monitor Flash 5
C Adattare il sito a vari schrmi HTML e CSS 2
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

Discussioni simili