Usar CSS para hacer una escala de la imagen hacia arriba y hacia abajo

Question

Tengo una imagen en el encabezado de mi sitio web. Me gustaría utilizar una propiedad de CSS para que se extienda a lo ancho del navegador, de modo que reaccione cuando el usuario ajuste el tamaño de la ventana del navegador, y para que el eje vertical de la imagen se escale en consecuencia. ¿Es esto realmente algo que se puede hacer?

Answer 1

Puede establecer las propiedades de ancho y alto en porcentajes (por ejemplo, un ancho del 100% haría que la imagen se extienda por la página). Esto se puede hacer usando CSS.

Answer 2

CSS sin duda puede estirar una imagen (o, al menos, lo he usado para hacerlo en Firefox en la url folowing: http://www.davidrhysthomas.co.uk/mindez/borked.html):

img {height: 100%; 
    width: 100%; 
    min-height: 600px; 
    min-width: 800px; 
    } 

por ejemplo.

Pero ... Creo que para reaccionar ante el cambio de tamaño de la ventana gráfica que JS sería probablemente tu mejor amigo.

Answer 3

Los porcentajes mantendrán una imagen de todo el ancho y actualizarán la imagen en el cambio de tamaño del navegador.

Si desea que la imagen siempre ser estiramiento, puede utilizar:

img { 
    width:100%; 
} 

Sin embargo, que fácilmente puede hacer que la imagen se vea como una mierda total. Una forma más segura podría ser:

img { 
    max-width:100%; 
} 

De cualquier forma la imagen cambiará de tamaño con el cambio de tamaño del navegador. Sin embargo, el segundo no estirará la imagen más allá de su tamaño natural, por lo que no se verá deformada.

Answer 4

Aquí, pruébalo, simplemente aplica este estilo CSS al elemento que contiene la imagen. En este ejemplo, la imagen está en el fondo del cuerpo de la página:

body 
{ 
margin: 0; 
padding: 0; 
width: 100%; 
background: url(images/YOUR-IMAGE.JPG) no-repeat left top; 
background-size: 100%; 
} 

Esto maximizará su imagen en todo el elemento. Al cambiar el tamaño de la ventana se escalará la imagen para que se ajuste al tamaño de la nueva ventana del navegador