cambio de tamaño automático de la imagen en un diseño de flujo CSS para simular un diseño html-table

Question

Tengo una imagen que, dependiendo de la resolución de la pantalla, cae fuera de la vista en mi presentación de flujo CSS por cuanto tengo su anchura y altura a valores estáticos.

¿Hay alguna manera en un diseño de flujo CSS para tener el tamaño de imagen de forma automática, mientras que alguien está haciendo la ventana del navegador más pequeño. He visto este hecho en un diseño html-table y supongo que las tablas hacen posible allí - ¿hay una 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" />

combinado con:

img.test { width: 50%; }

Cambia el tamaño de la forma en que es probable que desee. La imagen diligentemente cambiar el tamaño a 50% de la anchura de la caja que lo contiene, así como el cambio de tamaño vertical, manteniendo la relación de aspecto.

En cuanto a cambiar el tamaño basado en los cambios verticales, que no funciona de la manera que le gustaría, al menos no de manera consistente. Probé:

img.test { height: 50%; }

En Google Chrome actual (2.0.172), se cambia el tamaño un poco inconsitently; el dimensionamiento es correcto pero no se actualiza después de cada arrastre ventana. En actual Firefox (3.5), la altura parece ser ignorado por completo. No tengo ninguna forma remota reciente IE, Safari, etc para probar. Siéntase libre para editar en esos resultados. Incluso si los hacen bien su todavía probablemente algo que quiere evitar, y aferrarse a la anchura.

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

Piense en ello de esta manera:

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

Ahora supongamos que añadir un div. así ...

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

Entonces

• cuerpo es 100% de tamaño de la ventana.
• div es 100px, haciendo caso omiso de anchura del cuerpo.
• img es 50% de div.
• img es 50px, independientemente del tamaño de la ventana.

Si el div tiene "width: 100%" sin embargo, entonces la lógica se resuelve el mismo que antes. Siempre que su algún porcentaje, y no fija, se puede jugar con el porcentaje en la IMG y hacer que funcione el tamaño que desee.

Answer 2

poco de una conjetura desde mi css es basura, pero ya que nadie está contestando, ¿qué pasa con el establecimiento de una anchura o altura% o ambos en la imagen para que sea un porcentaje de su padre. dunno?

Answer 3

Trate de establecer ancho máximo a algo así como el 95%. Gracias manera la imagen se encogerá cuando la anchura recipiente es menor que el ancho de la imagen. Todos los contenedores primarios tendría que ADJU

max-width:95%;