Come fermare immagine restringimento quando la pagina viene ridimensionata orizzontalmente in CSS

Question

ho un'immagine 1920x100 che viene inserito in cima alla mia pagina:

<img src="./Resources/Images/banner.jpeg" style="position:absolute; top:0px; left:0px; height:100px; width:100%;" name="top"> 

Mi piacerebbe avere in modo che quando la pagina è ridimensionata orizzontalmente, l'immagine non compatta con la pagina, ma rimane invece al centro dello schermo, in questo modo:

sembra una cosa semplice che potrebbe essere realizzato facilmente, ma rifugio ho trovato una soluzione.

È possibile inserire l'immagine in un div e impostare la posizione sinistra del div da essere - (1920-pageWidth)/2, ma ciò si baserebbe su JavaScript. Sto cercando una soluzione più pulita (se ce n'è una), solo per ridurre al minimo la complessità della pagina e massimizzare la compatibilità del browser.

C'è qualche proprietà CSS che potrei usare per ottenere questo, o sto andando nel modo completamente sbagliato per raggiungere questo obiettivo?

Qualsiasi aiuto apprezzato.

Answer 1

Con i CSS

div { 
    background: url(./Resources/Images/banner.jpeg) no-repeat scroll center top transparent; 
    height: 100px; 
} 

Answer 2

È possibile aggiungere questa proprietà CSS per l'immagine: min-width: 1280px

Answer 3

Invece di usare img elemento usare la stessa immagine di sfondo-immagine, e la posizione come in centro. Sarà sempre centrato, ma potrebbe essere tagliato quando l'elemento è più piccolo dell'immagine. Dovresti anche impostare background-repeat su no-repeat nel caso in cui l'elemento si ingrandisca.

div { 
    background: url(/to/img) no-repeat 50% 0; 
    margin: 0 auto; 
} 

Answer 4

Che dire qualcosa di simile. (Utilizzare la metà della larghezza dell'immagine per la margin-left)

HTML:

<div id='wrapper'> 
    <img src='./Resources/Images/banner.jpeg' id='banner'> 
</div> 

CSS:

#wrapper{overflow:hidden;position:relative;} 
#banner{position:absolute;top:0;left:50%;margin-left:-960px;} 

Ecco un violino dimostrando utilizzando un div (modificare la larghezza di #wrapper): http://jsfiddle.net/mestekweb/mDkrE/

Answer 5

Basta usare l'immagine come background-image e utilizzare background-position valore per posizionarlo nella parte superiore centrale dell'elemento.

Vedere questo jsFiddle.