2012-05-18 12 views
12

tengo una imagen de 1920x100, que se inserta en la parte superior de mi página:¿Cómo detener la contracción de la imagen cuando la página se cambia el tamaño horizontalmente en CSS

<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í:

enter image description here

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.

Respuesta

4

Con CSS

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

Funciona perfectamente, gracias. –

4

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

+1

que permitiría a la imagen para reducir el tamaño hasta 1280px, pero creo que él quiere que la imagen de permanecer 1920px, pero permanecer centrado en la página con el desbordamiento escondido fuera de los bordes de la página. –

+0

esto me ayudó, tenía el conjunto de ancho/altura, pero la imagen todavía estaba cambiando de tamaño, gracias – workabyte

0

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; 
} 
1

¿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/

+0

Otra opción es usar la imagen como fondo, como otros han mencionado. –

1

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.

+0

Esto también es genial. ^^ – fungusanthrax

Cuestiones relacionadas