posizionare immagine dentro div più piccolo

[meldro]

Ho un div 100px X 100px che devef are da contenitore ad un immagine più grande (es.: 300px X 150px).

Se imposto l'overflow del div su hidden, l'effetto è quello che vorrei, ovvero l'immagine è "tagliata" solo per la dimensione del div MA è posizionata a partire dal lato alto a sinistra.

Esiste un modo per posizionare la stessa immagine, nello stesso div a piacimento?
Ad esempio se volessi centrare l'immagine rispetto al div?

[paololosco]

personalmente preferisco utilizzare tutte le immagini come sfondo...

nel tuo caso potresti fare cosi:

#boxImg {
width: 100px;
height: 100px;
background: url(copertina.jpg) center center no-repeat;
}

saluti

[meldro]

Originariamente inviato da paololosco
personalmente preferisco utilizzare tutte le immagini come sfondo...

nel tuo caso potresti fare cosi:

#boxImg {
width: 100px;
height: 100px;
background: url(copertina.jpg) center center no-repeat;
}

saluti

Grazie per la veloce risposta.
Ok per centrare l'immagine.
Ma c'è la possibilità si spostarla a piacimento?

[paololosco]

oppure...

se vuoi tenere il tag IMG nel tuo HTML:

#boxImg{
width: 100px;
height: 100px;
overflow: hidden;
}

#boxImg img{
margin-left:-100px;
margin-top:-25px;
/*
ovvero:
X = width immagine
Y = height immagine

(X-100)/2= left;
(Y-100)/2= top;
*/
}

testato su IE 6 - ergo, va dappertutto!!!

[meldro]

Originariamente inviato da paololosco
oppure...

se vuoi tenere il tag IMG nel tuo HTML:

#boxImg{
width: 100px;
height: 100px;
overflow: hidden;
}

#boxImg img{
margin-left:-100px;
margin-top:-25px;
/*
ovvero:
X = width immagine
Y = height immagine

(X-100)/2= left;
(Y-100)/2= top;
*/
}

testato su IE 6 - ergo, va dappertutto!!!

Perfetto. Grazie

[paololosco]

in entrambi i casi basta cambiare qualche parametro...


primo caso - basta dare un background position...!!!

ricorda che il punto di riferimento è l'angolo in alto a sinistra!

#boxImg {
width: 100px;
height: 100px;
background: url(copertina.jpg) no-repeat;
background-position: -100px /*sposta l'immagine verso sx finchè rimane negativo*/ -25px/*sposta l'immagine verso l'alto finchè rimane negativo*/; 
}

nel secondo caso (HTML con tag IMG)

#boxImg{
width: 100px;
height: 100px;
overflow: hidden;
}
img{
margin-left:-100px /*la sposta verso la sua destra finchè rimane negativo*/;
margin-top:-25px /*la sposta verso l'alto finchè rimane negativo*/;
}

ciao

[meldro]

Originariamente inviato da paololosco
in entrambi i casi basta cambiare qualche parametro...


primo caso - basta dare un background position...!!!

ricorda che il punto di riferimento è l'angolo in alto a sinistra!

#boxImg {
width: 100px;
height: 100px;
background: url(copertina.jpg) no-repeat;
background-position: -100px /*sposta l'immagine verso sx finchè rimane negativo*/ -25px/*sposta l'immagine verso l'alto finchè rimane negativo*/; 
}

nel secondo caso (HTML con tag IMG)

#boxImg{
width: 100px;
height: 100px;
overflow: hidden;
}
img{
margin-left:-100px /*la sposta verso la sua destra finchè rimane negativo*/;
margin-top:-25px /*la sposta verso l'alto finchè rimane negativo*/;
}

ciao

Di nuovo Grazie a tutti dell'aiuto! ;-)