elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Guía actualizada para evitar que un ransomware ataque tu empresa


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] tamaño AutoAjustable de una imagen al tamaño de su contenedor.
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] tamaño AutoAjustable de una imagen al tamaño de su contenedor.  (Leído 11,668 veces)
hackmastter

Desconectado Desconectado

Mensajes: 60



Ver Perfil
[Resuelto] tamaño AutoAjustable de una imagen al tamaño de su contenedor.
« en: 6 Octubre 2015, 01:55 am »

Hola a todos...

Si tengo un contenedor como este:
Código:
<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


« Última modificación: 10 Octubre 2015, 11:53 am por #!drvy » En línea

basickdagger


Desconectado Desconectado

Mensajes: 646


System.out.println("this is weird as fuck");


Ver Perfil
Re: tamaño AutoAjustable de una imagen respecto al tamaño de su contenedor.
« Respuesta #1 en: 6 Octubre 2015, 18:29 pm »

utiliza porcentajes...

Código:
<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...


« Última modificación: 6 Octubre 2015, 18:33 pm por basickdagger » En línea

eLank0
eLhAcKeR r00Lz


Desconectado Desconectado

Mensajes: 1.062



Ver Perfil WWW
Re: tamaño AutoAjustable de una imagen respecto al tamaño de su contenedor.
« Respuesta #2 en: 6 Octubre 2015, 20:56 pm »

Buenas noches,

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

Código:
   <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:
#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/
« Última modificación: 6 Octubre 2015, 20:58 pm por eLank0 » En línea

hackmastter

Desconectado Desconectado

Mensajes: 60



Ver Perfil
Re: tamaño AutoAjustable de una imagen respecto al tamaño de su contenedor.
« Respuesta #3 en: 9 Octubre 2015, 05:03 am »

Muchas gracias basickdagger pero lo que quiria es lo contrario a eso.  :rolleyes:
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  :xD

Gracias eLank0

Y sin javascript. Yo estaba seguro que me iba a tocar usar javascript.
« Última modificación: 9 Octubre 2015, 05:11 am por hackmastter » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines