Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it L'avatar di Legnetto
    Registrato dal
    May 2002
    Messaggi
    1,419

    Ridimensinare immagine in base al div contenitore

    Premetto che non sono molto pratico di javascript...
    Avrei l'esigenza di ridurre un'immagine usata per il background in base alle dimensioni di un div.
    Questo div si adatta alle dimensioni della pagina, visto che l'immagine dovrebbe essere visibile sempre tutta, mi piacerebbe che al caricamento del div dopo che posso conoscerne le dimensioni, questa si potesse ridimensionare.
    E' una cosa possibile? Se è possibile, mi basterebbe anche un link ad una spiegazione, poi ci provo(al massimo chiedo aiuto )
    Grazie in anticipo.
    Ciao
    Legnetto

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Stai affrontando il problema dal lato sbagliato.

    JS non ha capacita` grafiche e quindi non puo` modificare le dimensioni delle immagini.
    Ti conviene avere alcune immagini gia` pronte sul server, e caricare quella che meglio si adatta alle dimensioni.

    Serve un minimo di conoscenza dei CSS, poi la sostituzione puoi farla con JS:
    document.body.style.backgroundImage = url(nuovaimm.gif);
    oppure
    document.getElementById('ID_DIV').style.background Image = url(nuovaimm.gif);
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    Utente di HTML.it L'avatar di pietro09
    Registrato dal
    Jan 2002
    Messaggi
    10,116
    Ciao Legnetto

    Ho fatto una pagina di prova che forse può andare. Di più non so:
    codice:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    	<head>
    		<title>a</title>
    		<meta name="vs_defaultClientScript" content="JavaScript">
    		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    		<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
    		<meta name="ProgId" content="VisualStudio.HTML">
    		<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
    		<script id="clientEventHandlersJS" language="javascript">
    <!--
    
    function Button1_onclick() {
    	if(document.getElementById("div1").clientWidth <= document.getElementById("div1").clientHeight)
    		document.getElementById("img1").width = document.getElementById("div1").clientWidth - 4;
    	else
    		document.getElementById("img1").height = document.getElementById("div1").clientHeight - 8;
    	
    	document.getElementById("img1").src = "/corso_apogeo/immagini/f1-arenas.jpg";
    	document.getElementById("img1").style.visibility = "visible";
    	
    }
    
    function window_onload() {
    	Button1_onclick();
    }
    
    //-->
    		</script>
    	</head>
    	<body MS_POSITIONING="FlowLayout" language="javascript" onload="return window_onload()">
    		<INPUT type="button" value="Button" ID="Button1" NAME="Button1" language="javascript" onclick="return Button1_onclick()">
    		<div id="div1" style="border:1px red solid;width:80%;height:80%">
    			[img][/img]
    		</div>
    	</body>
    </html>

    qualche spiegazione. All'inizio non carico l'immagine, altrimenti IE adatta il div all'immagine ed esce fuori pagina
    Perciò, nell'evento load, controllo se il div è più largo o più alto. In base a questo recupero la larghezza o l'altezza utile del div. A questo punto carico l'immagine che può essere o una immagine normale, o una pagina asp.net che ridimensiona l'immagine

    (document.getElementById("img1").src = "pagina.aspx?width=xxx";

    alla fine rendo visibile l'immagine

    La stranezza di clientWidth - 4 e di clientHeight - 8 derivano dal fatto che, mentre con Firefox funziona benissimo senza, è necessario con IE

    Pietro

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Piero, occhio che Legnetto parlava di immagine di sfondo
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  5. #5
    Utente di HTML.it L'avatar di pietro09
    Registrato dal
    Jan 2002
    Messaggi
    10,116
    Originariamente inviato da Mich_
    Piero, occhio che Legnetto parlava di immagine di sfondo
    Chiedo scusa, in fondo ho mangiato pochi panettoni questo Natale, ma ne sento ancora l'effetto

    Pietro

  6. #6
    Utente di HTML.it L'avatar di Legnetto
    Registrato dal
    May 2002
    Messaggi
    1,419
    Prima di tutto ringrazio entrambi per l'aiuto.
    Ho risolto con questo script trovato in rete che si adatta perfettamente alle mie esigenze.
    <SCRIPT>
    <!--
    function makeIm() {
    imSRC = "images/sfuma_big.jpeg";
    winWid = document.body.clientWidth -17 ;
    winHgt = document.body.clientHeight;
    imStr = "<IMG STYLE='position:absolute;left:0;top:0;z-index:-1; NAME='imBG' BORDER=0 SRC=" + imSRC;
    imStr += " WIDTH=" + winWid;
    imStr += " HEIGHT=" + winHgt;
    imStr += ">";
    document.write(imStr);
    }
    //-->
    </SCRIPT>
    Visto che la tabella con i risultati ha le dimensioni del body(100%), l'immagine creata si adatta perfettamente(un pixel di troppo con firefox)alle mie esigenze.
    Grazie ancora.
    Legnetto

    [EDIT]
    @Pietro
    Vedrai che prima o poi imparo qualcosa anch'io di questo splendido linguaggio.
    [/EDIT]

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.