Ajuste de anchos de imagen proporcionales para cambiar el tamaño del navegador

Question

Si tengo una imagen combinada con un estilo:

<img class="test" src="testimage.jpg" />

img.test { width: 50%;}

La imagen cambia de tamaño para 50% de la anchura de la caja que lo contiene, así como el cambio de tamaño vertical, manteniendo la relación de aspecto.

Esto parece requerir que el DIV que encierra a ser fijado a una anchura particular, y el valor de altura. Sin embargo, si desea que el DIV que encierra para redimensionar automáticamente a medida que se arrastra el navegador más pequeño o más grande, esto no sería un problema?

Answer 1

he aclarado mi respuesta a su pregunta original . Ve a echar un vistazo y ver si se aclara las cosas. Más o menos, si desea que la imagen para cambiar el tamaño de la ventana que no puede establecer el DIV a un ancho fijo y altura. El DIV debe tener una anchura% y la altura también.

Answer 2

Usted tendrá que especificar manualmente las propiedades width y height para obtener la imagen para mantener sus dimensiones. Esto no sería demasiado difícil si usted está utilizando la codificación del lado del servidor (PHP / ASP).

Otra manera de hacerlo sería utilizar JavaScript para calcular y cambiar el tamaño de la imagen de forma dinámica.

Answer 3

No, la imagen fija será del 50% de la div, y si el div es una parte de la página, eso no importa.

Answer 4

Sus todas las proporciones: El div que rodea podría ser 2/3 de toda la ventana, y la imagen se wil medio de eso. Todo se calcula antes de su pantalla, sólo un montón de cálculos numéricos. ; D