Ajuste de anchos de imagen proporcionales para cambiar el tamaño del navegador
-
12-09-2019 - |
Pregunta
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?
Solución
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.
Otros consejos
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.
No, la imagen fija será del 50% de la div, y si el div es una parte de la página, eso no importa.
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