[Resuelto] tamaño AutoAjustable de una imagen al tamaño de su contenedor.

[hackmastter]

Hola a todos...

Si tengo un contenedor como este:

Código [Seleccionar] Expandir


<div width: 200px; height: 400px;>
    <img src="image.jpg" width: 200px; />
</div>

Se supone que la imagen es del mismo WIGHTque su contenedor y al no tener definido su HEIGHT este se aplica automaticamente en relacion a su WIDTH asignado y a su altura original (la del .jpg).

Otra cosa es que para que el se AutoAjuste a su DIV se le podria aplicar un HEIGHT en %.

Ok, hasta ahí es demasiado sencillo. Pero lo que no sé todavía es como hacer cuando el DIV tiene arriba un texto. (Así como este de varias palabras). Porque si yo le escribo un texto que ocupe el 20% de ese DIV estonces a la imagen tendría que aplicarle máximo un 80% de HEIGHT pero si la pantalla se reduce de tamaño entonces las palabras se apilan una encima de la otra y conmienzan a ocupar mas del 20% lo que hace que mi imagen se salga del DIV.

Entoces, como haría para que ese HEIGTH de la imagen cresca de foma automática y ajusta al espacio que las letras dejan disponibles.? Y claro, si la pantalla disminulle de tamaño a las letras se apilan entocen la imagen reduce automaticamente su HEIGHT y se ajusta al espacio que las letras de dejen dentro del DIV

[basickdagger]

utiliza porcentajes...

Código [Seleccionar] Expandir


<style>
#contenido{width: 200px; min-height: 400px;overflow hidden;}
#imagen{width:100%;height:200px;}
#imagen img{height:100%;}
#texto{width:100%;min-height:200px;overflow:hidden;}
</style>
<div  id="contenido>
   <div id="imagen">
    <img src="image.jpg"  />
   </div>
   <div id="texto">
     aqui el texto
   </div>
</div>



no se si esto era tu duda pero dentro del contenedor agregas 2, uno para imagen y otro para texto, con el min-height y el overflow haces crecer el div principal manteniendo del mismo tamaño siempre la imagen aunque el texto crezca...

[eLank0]

Buenas noches,

Puedes usar flexbox, que ya está incluido en HTML y olvidarte de porcentajes y píxeles:

Código [Seleccionar] Expandir

   <div id="container">
     <img class="image" src="#PATH" />
   </div>

Cómo puedes ver esto es muy sencillo, una imagen dentro de un div:

Código [Seleccionar] Expandir

#container {
 display: flex;
 flex-direction: column;
 width: 38px;
 height: 1px;
}

.image {
 flex-grow: 1;
 height: 100%;
}

Flex-direction indica como se van a ordenar los elementos dentro de #container. En este caso he puesto column que significa de arriba abajo. Flex-grow indica el porcentaje de tamaño que tendrá el elemento dentro del contenedor, por ejemplo, si pusieramos otra imagen con flex-grow: 2, la primera ocuparía un tercio del contenedor y la segunda dos tercios, así de simple.

Aquí te dejo un plunkr que demuestra mi código, prueba de ir cambiando valores al height y el width del contenedor y verás como va redimensionando la imagen.

http://plnkr.co/edit/0gbVsYxCBkV4iRDZGsve?p=preview

Salu2

PD: Para más información sobre flex-box, una guía muy completa en CSS-Tricks:

A Complete Guide to Flexbox | CSS-Tricks
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[hackmastter]

Muchas gracias basickdagger pero lo que quiria es lo contrario a eso.  
No quiero que la imagen se mantenga con su tamaño fijo. Sino que su tamaño cresca para ocupar todo el espacio que no ocupa el texto o que su tamaño disminuya para dale espacio a al texto según sea el caso.

Lo que quería era exactamente lo que hizo eLank0  
De haber tenido ese código antes, me huiese ahorrado muchos problemas  

Gracias eLank0

Y sin javascript. Yo estaba seguro que me iba a tocar usar javascript.