Cambio automático de tamaño de imagen en un diseño de flujo CSS para simular un diseño de tabla html

Question

Tengo una imagen que, según la resolución de la pantalla, desaparece en mi diseño de flujo de CSS porque he configurado su ancho y altura como estáticos valores.

Hay un modo en un diseño de flujo CSS para que la imagen cambie de tamaño automáticamente mientras que alguien está reduciendo la ventana del navegador. He visto esto hecho en un diseño de tabla html y supongo que las tablas lo hacen posible allí. ¿Hay alguna manera de hacer esto también en un diseño de flujo CSS?

Answer 1

Una prueba rápida muestra que esto:

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

combina con:

img.test { width: 50%; } 

Cambia el tamaño de la forma en que es probable que desee. La imagen se redimensionó diligentemente al 50% del ancho de la caja que la contiene, así como al cambio de tamaño verticalmente, manteniendo la relación de aspecto.

En cuanto al cambio de tamaño en función de los cambios verticales, no funciona de la manera que le gustaría, al menos no consistentemente. Intenté:

img.test { height: 50%; } 

En la versión actual de Google Chrome (2.0.172), cambia el tamaño de forma inconsciente; el tamaño es correcto, pero no se actualiza después de cada arrastre de ventana. En Firefox actual (3.5), la altura parece ser ignorada por completo. No tengo ningún IE, Safari, etc. remotamente reciente para probar. No dude en editar en esos resultados. Incluso si a ellos les va bien, es probable que todavía sea algo que quieras evitar, y mantente con el ancho.

EDIT: Para que esto funcione, todos los elementos que contienen img.test necesitan ser dimensionada con porcentajes, no estáticamente.

creo que de esta manera:

• cuerpo es el 100% del tamaño de la ventana.
• img es 50% del cuerpo.
• img es el 50% del tamaño de la ventana.

Supongamos que añado un div. así ...

<div class="imgbox" style="width: 100px;"> 
    <img class="test" src="testimage.jpg" /> 
</div> 

Entonces

• cuerpo es 100% del tamaño de la ventana.
• div es 100 píxeles, ignorando el ancho del cuerpo.
• img es 50% de div.
• img es de 50 px, independientemente del tamaño de la ventana.

Si el div tiene "ancho: 100%", la lógica funciona igual que antes. Siempre que sea un porcentaje, y no fijo, puede jugar con el porcentaje en el img y hacerlo funcionar del tamaño que desee.

Answer 2

Supongo que mi CSS es basura, pero como nadie responde, ¿qué hay de establecer un% de ancho o alto o ambos en la imagen para que sea un porcentaje de su elemento principal. ¿No sé?

Answer 3

Intenta establecer el ancho máximo en aproximadamente un 95%. Gracias a que la imagen se encogerá cuando el ancho del contenedor sea menor que el ancho de la imagen. Todos los contenedores principales necesitarían adju

max-width:95%;