Foros del Web » Creando para Internet » CSS »

Imagen que se adapta al Div

Estas en el tema de Imagen que se adapta al Div en el foro de CSS en Foros del Web. Hola a todos... Tengo una imagen de 913px x 298px que quiero poner dentro de un Div con medidas en % y que la misma ...
  #1 (permalink)  
Antiguo 03/03/2007, 12:29
 
Fecha de Ingreso: octubre-2004
Mensajes: 741
Antigüedad: 13 años, 1 mes
Puntos: 3
Imagen que se adapta al Div

Hola a todos...
Tengo una imagen de 913px x 298px que quiero poner dentro de un Div con medidas en % y que la misma se adapte al tamaño del Div. Es decir, el div es más pequeño que la imagen.
Esto es para hacer que la imagen, si se ve con resolución 800 se achique y si es resolución 1024 se alargue, por que en esta resolución el div se estira y quiero que la imagen también.
He buscado pero no encuentro explicaciones, salvo que esto no se pueda hacer y esté equivocado en mi consulta!!!
Gracias y saludos.-
  #2 (permalink)  
Antiguo 03/03/2007, 12:31
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
Re: Imagen que se adapta al Div

No se puede hacer
__________________
MUERTE a Internet Explorer


Mi portfolio de diseño web en Elda
  #3 (permalink)  
Antiguo 03/03/2007, 12:33
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
Re: Imagen que se adapta al Div

Hola paulkees

Prueba con esto:

Código:
div img {width:100%; height:100%}
Saludos,
  #4 (permalink)  
Antiguo 03/03/2007, 13:09
 
Fecha de Ingreso: octubre-2004
Mensajes: 741
Antigüedad: 13 años, 1 mes
Puntos: 3
Re: Imagen que se adapta al Div

Gracias JavierB...
Vamos mejorando, lo que pasa es que con tu ejmplo ahora la imagen queda dentro del div pero al tamaño de ella, sin adaptarse al tamaño del div.
Me pregunto lo siguiente, si una imagen es ma pequeña que el Div, la misma se repite o no se repite según lo que pongamos, entonces, cómo se puede hacer para que la imagen se achique si es más grande que el Div y se ajuste al mismo?
Espero que no sea absurdo lo que pregunto.
Saludos.-
  #5 (permalink)  
Antiguo 03/03/2007, 17:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Imagen que se adapta al Div

Puede ser que no hayas hecho bien algo de lo que te ha dicho javierB. Este código funciona perfectamente:

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Foto elastica</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style>
#caja{
width: 70%;
height: 90%;
}
#caja img {width: 100%;
height: 100%;
}
  </style>
</head>
<body>
<div id="caja"><img src="tufoto.jpg"></div>
</body>
</html>
Míralo cómo funciona aquí:

http://www.menoslobos.com/mikel/foro..._elastica.html

Prueba a reducir la ventana del navegador como quieras.

Mikel.
  #6 (permalink)  
Antiguo 03/03/2007, 18:13
 
Fecha de Ingreso: octubre-2004
Mensajes: 741
Antigüedad: 13 años, 1 mes
Puntos: 3
Re: Imagen que se adapta al Div

Gracias Mikmoro...
Lo pondré en práctica a ver como va...
Gracias nuevamente!!!
Saludos.-
  #7 (permalink)  
Antiguo 04/03/2007, 11:56
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
Re: Imagen que se adapta al Div

mmmmm... veo que fui bastante radical... jejejeje

El caso es que el resultado de una imagen con tamaño variable, con las tecnicas actuales no me parece que sea algo apto.
__________________
MUERTE a Internet Explorer


Mi portfolio de diseño web en Elda
  #8 (permalink)  
Antiguo 04/03/2007, 15:22
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Imagen que se adapta al Div

No, muy apto no es porque desde luego, cualquier imagen se hace papilla.

Mikel.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:36.