Tamaño de imagen automático basado en las dimensiones de la ventana del navegador

Tengo un diseño básico de página web con un encabezado de 100% de ancho y un pie de página adhesivo. Entre los dos tengo un gran gráfico.Tamaño de imagen automático basado en las dimensiones de la ventana del navegador

Me gustaría que el gráfico cambie de tamaño dinámicamente según el tamaño de la ventana.

Prefiero no usar flash, y me preguntaba si existe una manera fácil de hacerlo con jquery/javascript.

No soy experto en jquery/javascript, así que me preguntaba cómo abordar esto porque existe un componente que ya lo hace.

Fuente

2010-12-31 Dkong

Use el porcentaje que es más probable que lo ayuden como Babiker mencionó – Ramilol

img.thespecialimage { 
    min-height : 100%; 
    min-width : 100%; 
    max-height : 100%; 
    max-width : 100%; 
}

Fuente

2010-12-31 23:04:59 Gabriel

Gabriel, voy a probar esto. ¿Sabes si funcionará en todos los navegadores? – Dkong

Según el entorno (y si está dispuesto a usar CSS3), la escala adecuada podría ser útil: http://robertnyman.com/css3/background-size/background-size.html – Xenethyl

@Xenethyl debe publicar eso como una respuesta, renunciaré a eso. @Dkong es posible que encuentres algo raro en IE5 y quizás un poco en IE6, pero eso debería funcionar en casi todos lados. – Gabriel

Conjunto contenedores el ancho de imagen en porcentaje como en width:{amount}%;, a continuación, establecer el ancho de la imagen en porcentaje también. De esta forma, su contenedor de imágenes se expande a medida que su imagen se expande también, o al menos así parecerá, porque la imagen se está expandiendo a medida que el contenedor se expande. No es necesario que establezca el ancho de la imagen al 100%, pero lo que sea que establezca es relativo al ancho de los contenedores.

Fuente

2010-12-31 23:10:12 Babiker

+1 por usar porcentajes – Ramilol

@Ramilol - Gracias. – Babiker

Alternativamente, configure 'height: ...%'. Esto será como un porcentaje de la altura del padre posicionado. Si establece solo el ancho o alto, el otro se calculará para usted en función de la relación de aspecto de la imagen. – Phrogz

Si está dispuesto a confiar en CSS3 y mostrar su imagen como fondo en un elemento, considere usar background-size. Seguir esta ruta le permite cambiar el tamaño de la imagen conservando su relación de aspecto.

Here's a quick example of background-size.

Esto puede por supuesto ser hecho manualmente si supervisa el tamaño de la ventana usando JS y cambiar el tamaño en consecuencia. Si está interesado en seguir esta ruta, infórmenos. Yo recomendaría usar una solución de CSS puro para algo tan trivial, si es posible, para no alejar a los usuarios con JS deshabilitado.

Fuente

2010-12-31 23:17:42 Xenethyl

<style> 
.wrapper {width:58.536585%; /*960/1640 = .58536585*/ margin:0 auto;} 
.resize {width:100%; height:auto;} 
</style>  

<div class="wrapper"> 
    <img class="resize" src="image.jpg" /> 
</div>

Esto cambiará el tamaño de su imagen para que coincida con su contenedor y mantener la proporción en su lugar. Si configura el contenedor en un porcentaje, todo se escalará.

ancho envoltorio = 960 dividido por el ancho de la pantalla = 1640px

Si desea todo el sitio para responder lo que tiene que hacer los cálculos hasta el fondo. divide al niño por su padre. ¡Espero que esto ayude!

Fuente

2011-05-17 05:36:49 Alan

Tamaño de imagen automático basado en las dimensiones de la ventana del navegador

Respuesta

Cuestiones relacionadas