Ridimensionare immagine in base alla risoluzione

**xFIGHI** · 02-12-2012, 22:55

Ciao a tutti, sono nuovo e spero di avere postano nella sezion giusta

... Di HTML conosco giusto i concetti di base e di CSS giusto un infarinatura... Sto iniziando a progettare una pagina "modello" che si adatti a tutte le risoluzioni possibili. Ho strutturato nel seguente modo la pagina:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>xx title edited by webdemo xx</title>
<link rel="stylesheet" href="stile.css" />
<style type="text/css">

body{
	
	background-image: url(pattern.png); 
	margin: 0;
	padding: 0px;
	
}

</style>
</head>

<div align="center">[img]background.png[/img]</div>

<body>
</body>
</html>

In sostanza ho creato via CSS una pattern che facesse da sfondo ripetendosi all'infinito e avrei voluto integrare un'immagine di sfondo per la pagina in se, non so se si capisce, dove situerò il contenuto della pagina. Questa seconda immagine di sfondo dovrà essere centrata e soprattutto dovrà adattarsi con la risoluzione della pagina... Lasciate stare i parametri H e W che ho settato per testare il tutto, come potrei farlo?

Grazie a tutti!

**bigdada** · 03-12-2012, 16:29

scusa ma non capisco a cosa serve il div sopra il body, io l'avrei messo dentro.
adesso non ti serve richiamare la pagina css perchè sia html che css sono sulla stessa pagina.
gli elementi il aggiungi alla pagina con dei div, span, table, ecc. dentro il body.
per l'immagine ho un problema, te vuoi una immagine che si ripete o una che occupi tutto lo sfondo?
nel primo caso va bene così, nel secondo al posto del div devi aggiungere una elemento del tipo <img>, fare il collegamento all'immagine e impostare altezza e larghezza al 100%.
putroppo ti lascia un bordino bianco all'esterno e l'immagine rimane sgranata più lo schermo diventa grande.

spero di aver risposto alle tue domande in modo soddisfacente

ti scrivo il codice per l'immagine estesa:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#ciao{
width:100%;
height:100%;
}
</style>
</head>
[img]untitled.bmp[/img]
<body>
</body>
</html>

**Emulman** · 03-12-2012, 17:40

bravo bigdada, nella pagian c'è appunto quell'errore, il div deve stare in mezzo al body della pagina. cmq per un buon metodo più sofisticato è quello di usare javascript e il DOM:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
  function cambiaDimensioniImage() {
    document.getElementById("image").width = screen.width;
    document.getElementById("image").width = screen.height;
  }
</script>
</head>
<body onLoad="cambiaDimensioniImage()">
  [img]untitled.bmp[/img]
</body>
</html>

una racocmandazione: non usate MAI immagini BMP, sono grosse e pesanti da caricare! usate solo JPG o PNG !

**bigdada** · 03-12-2012, 17:49

come si usa il DOM?

mi puoi dare un link a un manuale semplice?
per l'immagine ho preso la prima che ho trovato su internet

**Emulman** · 03-12-2012, 17:51

se vuoi studiarti per bene il DOM che tarsforma tutti i tag di una pagina in oggetti con proprietà e metodi puoi andare qua , forse la miglior guida disponibile...

fra i comandi JS per il DOM il più "gettonato" è document.getElementById("Id_comando") che preleva il tag con id "id_comando") e puoi farne di tutti i colori,a nche cambiare lo stile CSS. Ad esempio se hai un tag

e vuoi metterci rosso come sfondo puoi scrivere

<html>
<head>
<title></title>
</head>
<body onload="document.getElementById('ciao').style.back groundColor = '#FF0000'">
<p id="ciao">CIAO BIGDADA!</p>
</body>
</html>

Discussione: Ridimensionare immagine in base alla risoluzione

Strumenti discussione

Ricerca discussione

Visualizza

Ridimensionare immagine in base alla risoluzione

Permessi di invio