¿Cómo detener la contracción de la imagen cuando la página se cambia el tamaño horizontalmente en CSS

Question

tengo una imagen de 1920x100, que se inserta en la parte superior de mi página:

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

me gustaría tenerlo de manera que cuando la página es redimensionado horizontalmente, la imagen no se encoge con la página, sino que permanece en el centro de la pantalla, así:

parece una cosa simple que podría conseguirse con facilidad, pero no he Encontré una solución.

pude poner la imagen dentro de un div y fijar la posición izquierda de la div que sea - (1920-pageWidth)/2, pero esto dependería de JavaScript. Estoy buscando una solución más limpia (si hay una), solo para minimizar la complejidad en la página y maximizar la compatibilidad del navegador.

¿Hay alguna propiedad CSS que podría utilizar para lograr esto, o me estoy yendo por el camino equivocado por completo de lograr esto?

Cualquier ayuda apreciada.

Answer 1

Con CSS

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

Answer 2

Puede añadir esta propiedad CSS para su imagen: min-width: 1280px

Answer 3

En lugar de utilizar img elemento de utilizar la misma imagen de fondo, imagen y posición que en al centro. Siempre estará centrado, pero puede recortarse cuando el elemento es más pequeño que la imagen. También debe establecer background-repeat para no-repeat en caso de que el elemento crezca.

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

Answer 4

¿Qué pasa algo como esto. (Usar la mitad de la anchura de la imagen para el 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;} 

Aquí es un violín que demuestra que el uso de un div (cambiar el ancho de #wrapper): http://jsfiddle.net/mestekweb/mDkrE/

Answer 5

sólo tiene que utilizar la imagen como un background-image y utilizar el background-position valor para colocarlo en la parte superior central del elemento.

Ver esto jsFiddle.