Div con immagine centrata e sempre a risoluzione

**xellos81** · 25-07-2012, 19:18

Salve
sono nuovo del forum, e sono nuovo di CSS e HTML...
e così mi ritrovo ad avere un po le idee confuse (ed un css non funzionante)
ed è per questo che mi affido a voi.
Vengo al dunque:

ho una pagina al momento vuota
voglio inserirci un div (in futuro anche più di uno)
e voglio inserirci un'immagine (img o bg?) che sia renderizzata tutta per intero (si allo scroll no ai ritagli) e che sia sempre centrata e sempre con la sua risoluzione nativa (no ingrandimenti o rimpicciolimenti vari!)

quindi voglio che l'immagine sia sempre 1200 per 768
e che quando il monitor ha una risoluzione maggiore, semplicemente non mostri nulla ai lati (o magari potrei fare un repeat orizzontale...ma questa è un'altra storia)
e che quando il monito invece ha una risoluzione in larghezza inferiore a 1200 mostri sempre il centro orizzontale dell'immagine. (come l'iPhone per esempio)

ringrazio in anticipo!

**Prill** · 25-07-2012, 21:10

Centrare in orizzontale è semplice, più complicato in verticale. Usando un posizionamento assoluto ma inserendo il tutto in un contenitore con posizionamento relativo per evitare tagli:

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=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
html, body {
	height:100%;
	margin:0;
	padding:0
}
#container {
	min-height:768px;
	height:100%;
	width:1200px;
	margin:auto;
	position:relative;
}

#image {
	width:1200px;
	height:768px;
	position:absolute;
	top:50%;
	margin-top:-384px; /* metà dell'altezza */
}

</style>
</head>

<body>
<div id="container">
	[img]immagine.jpg[/img]
</div>
</body>
</html>

testato su ie9, firefox, safari, opera, chrome (ma dovrebbe andare anche su ie6, 7 e 8 per i quali però ho testato indirettamente su browsershots, che fornisce delle foto dello schermo dai vari browser).

Visualizzare al centro per schermi con risoluzione più piccola invece non saprei come fare

**xellos81** · 26-07-2012, 01:15

ho copiato ed incollato in un index file ma niente...
non ottengo l'effetto desiderato

al rimpicciolire della finestra si vede sempre il lato sinistro e superiore...

**xellos81** · 26-07-2012, 03:36

ho fatto dei tentativi, e sono riuscito ad ottenere l'effetto che volevo ma solo orizzontalmente. Sono andato per tentativi ma non ho ben capito come abbia fatto.

Vorrei aggiungere lo stesso effetto ma verticalmente.
Qualche idea?

http://cssdesk.com/TgDAj

**Prill** · 26-07-2012, 09:06

Ma stai usando l'immagine come sfondo, così puoi centrarla con semplicità, ma non sarà centrato in verticale il tuo div. E comunque l'immagine a risoluzioni alte o zoommando si ingrandirà o rimpicciolirà in proporzione lasciando i margini laterali visibili . Per centrare il div in verticale vale quanto detto prima.
Puoi aggiungere al body un background-color:#32312f ed eventualmente rimuovere dall'immagine il riquadro col bordino assegnando i bordi grigi ai div interni.
Quanto all'altro problema:

e che quando il monito invece ha una risoluzione in larghezza inferiore a 1200 mostri sempre il centro orizzontale dell'immagine.

questo puoi ottenerlo con l'immagine come sfondo, ma prevedendo dimensioni in percentuale e un suo taglio a risoluzioni basse (avendo quindi un div con larghezza eguale al 100% e non di 1200 pixel)

Oppure dovrai avere uno sfondo ridimensionabile

**xellos81** · 26-07-2012, 11:07

Originariamente inviato da Prill
Ma stai usando l'immagine come sfondo, così puoi centrarla con semplicità, ma non sarà centrato in verticale il tuo div. E comunque l'immagine a risoluzioni alte o zoommando si ingrandirà o rimpicciolirà in proporzione lasciando i margini laterali visibili . Per centrare il div in verticale vale quanto detto prima.
Puoi aggiungere al body un background-color:#32312f ed eventualmente rimuovere dall'immagine il riquadro col bordino assegnando i bordi grigi ai div interni.

Eccomi, ti ringrazio per la pazienza, ma non è quel che cercavo di risolvere, magari mi sono spiegato male.
Premettiamo che lo sfondo l'ho creato fittizio e i riquadri servono solo ed esclusivamente per far meglio capire qual'è il centro.
Inoltre, quel che vorrei ottenere è:
immagina di avere un riquadro bianco su quello sfondo 1200x768, quel riquadro è di 400x400 per esempio, ed è posizionato al centro sia orizzontalmente che verticalmente.

Ora, rimpicciolendo la finestra del browser in modo da visualizzare man mano sempre meno pixel fino ad arrivare a 400x400 pixel , vorrei che si visualizzi, sempre centrato, quel quadrato di 400x400px, finchè si vedrà solo quel quadrato bianco, e non il resto delle sfondo.

Ragazzi scusatemi ma non è semplicissimo spiegarlo a parole!

**Mich_** · 26-07-2012, 11:58

La questione e` quindi

CENTRARE UN OGGETTO VERTICALMENTE E ORIZZONTALMENTE

La cosa e` gia` stata risolta in tutti i casi, e le soluzioni sono citate tra i "link utili".

La cosa piu` semplice e` usare i posizionamenti assoluti, usando

codice:

left: 50%;
margin-left: (meno la meta` della larghezza dell'oggetto);
top: 50%;
margin-top: (meno la meta` dell'altezza dell'oggetto);

Naturalmente occorre che il contenitore abbia posizione almeno relative e definirne le dimensioni.

**Prill** · 26-07-2012, 12:25

se devi centrare verticalmente solo il div rispetto all'immagine, conoscendo le dimensioni dell'uno e dell'altra basterebbe usare un padding-top o un margin-top per il div interno. Ma se l'immagine deve potersi ridurre al solo riquadro interno, allora non potranno essere usati né margini né padding, l'immagine dovrà essere impostata come sfondo non ripetuto e centrato, orizzontalmente e verticalmente e così sarà per il div:

codice:

<style type="text/css">
<!--
html, body {
	height:100%;
	margin:0;
	padding:0
}
body {
	background:#201F1D url(isEXkzvFPZ10o.jpg) no-repeat center center;
}
#container {
	min-height:420px;
	height:100%;
	width:400px;
	margin:auto;
	position:relative;
}


#inner {
	width:400px;
	height:420px;
	position:absolute;
	top:50%;
	margin-top:-210px;
	overflow:auto;
	background-color:#FFFFFF
}
-->
</style>
</head>

<body>
<div id="container">
  <div id="inner"><p style=" height:500px">solo per verificare lo scrolling</p></div>
</div>
</body>
</html>

colori di sfondo e altre impostazioni sono solo per visualizzare meglio

**xellos81** · 26-07-2012, 13:42

ma anche in questo caso, come sto provando
quando rimpicciolisco la finestra più del div interno, il lato sinisto del div rimane incollato alla finestra

e cmq non voglio ridimensionare l'immagine

**Prill** · 26-07-2012, 13:52

se l'immagine non deve essere ritagliata il container dovrà avere le dimensioni dell'immagine, ma comunque nel browser riducendo le dimensioni della finestra avrai lo scrolling ma non partirà dal centro pagina, cioè non visualizzerai la pagina al suo centro potendo scrollare a destra e a sinistra

Discussione: Div con immagine centrata e sempre a risoluzione

Strumenti discussione

Ricerca discussione

Visualizza

Div con immagine centrata e sempre a risoluzione

Permessi di invio