Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Ajustar imagen a div

Estas en el tema de Ajustar imagen a div en el foro de CSS en Foros del Web. Hola amigos. Tengo esta pregunta. Tengo una imagen de 500x500 px. Por otro lado, tengo un div de 300x300 px. Ahora, con este codigo background-image: ...
  #1 (permalink)  
Antiguo 14/09/2010, 11:00
 
Fecha de Ingreso: mayo-2009
Mensajes: 729
Antigüedad: 8 años, 6 meses
Puntos: 6
Ajustar imagen a div

Hola amigos. Tengo esta pregunta.

Tengo una imagen de 500x500 px. Por otro lado, tengo un div de 300x300 px.

Ahora, con este codigo

background-image: url(../imagenes/lat_izqdo/menu_claro.jpg);

se inserta la imagen en el div, pero no sale entera, es decir, como el div es 300x300 px., sale la parte que mide 300x300 px de la imagen.

Lo que quiero es ajustarlo para que, aunque la imagen mas grande que el, que la imagen ocupe todo el div, y no salga solamente una parte.

Por cierto, ya se que puedo ajustar la imagen a la medida del div, pero no quiero hacerlo así ya que el div cambia de tamaño continuamente.

Ademas, la opcion de repeat no vale tampoco, ya que por el tipo de imagen, no saldría.

Gracias por vuestra ayuda. Un saludo.
  #2 (permalink)  
Antiguo 14/09/2010, 11:30
Avatar de Omegakenshin  
Fecha de Ingreso: junio-2010
Ubicación: Costa Rica
Mensajes: 156
Antigüedad: 7 años, 6 meses
Puntos: 22
Respuesta: Ajustar imagen a div

mmmm... osea necesitas una imagen ke sea, "fluida" ke se ajuste al div mientras cambia de forma o algo similar?

creo k no es posible, corrijanme si me ekivoco, talvez con algun script o kien sabe, pero deberias de buscar otro metodo...
  #3 (permalink)  
Antiguo 14/09/2010, 12:28
 
Fecha de Ingreso: mayo-2009
Mensajes: 729
Antigüedad: 8 años, 6 meses
Puntos: 6
Respuesta: Ajustar imagen a div

Bueno, sería suficiente con que se ajuste al tamaño del div, no hace falta que este cambiando de tamaño continuamente. Es decir, en el ejemplo que puse en el primer post, que la imagen de 500x500 se ajuste al 300x300, olvidemos si el div cambia de tamaño o no.

Por cierto, la imagen siempre va a ser mas grande que el div.
  #4 (permalink)  
Antiguo 14/09/2010, 13:54
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Ajustar imagen a div

Vía css sólo es posible con las propuestas de css3:
http://www.forosdelweb.com/f53/auto-...1/#post3546487
Advertencias (para evitárselas a algún otro): todas las concernientes a ser una propuesta css3

Puede recurrir a insertarla en el html vía src. Posición absoluta, y declarando su anchura (o altura) al 100%. Una sola de ellas. Obligado que su contenedor padre tenga definido ese tamaño.
Advertencias: las propias de redimensionar una imagen, y el que sus medidas (LxH) sean coincidentes con la caja que la aloja.
  #5 (permalink)  
Antiguo 14/09/2010, 14:58
 
Fecha de Ingreso: mayo-2009
Mensajes: 729
Antigüedad: 8 años, 6 meses
Puntos: 6
Respuesta: Ajustar imagen a div

Hola Kseso, gracias por tu respuesta. En cuanto a las propuestas de css3, el problema de siempre, hasta que no lo acepten todos los navegadores, habrá que seguir esperando y a ver si sale de una vez ya, porque lo que es ccs2, llevo como tiempo usándolo, pero nunca he encontrado en un lenguaje tantas limitaciones.

La segunda solución la conocía, aunque no puedo (ni quiero) colocar los div en posicion absoluta.

En cualquier caso, has sido muy amable. Muchas gracias.
  #6 (permalink)  
Antiguo 14/09/2010, 17:44
 
Fecha de Ingreso: noviembre-2008
Mensajes: 94
Antigüedad: 9 años
Puntos: 6
Respuesta: Ajustar imagen a div

Hola,

¿sería posible hacerlo con javascript y php? Es decir, que el javascript le mande a pedir la imagen a un script php con el ancho y alto que requiere, que el php use GD o algo así para modificarla, y entonces el javascript se lo meta al background-image del div. Podría ser una solución.
  #7 (permalink)  
Antiguo 29/04/2013, 14:48
Avatar de Dekadence  
Fecha de Ingreso: junio-2011
Mensajes: 15
Antigüedad: 6 años, 6 meses
Puntos: 2
Respuesta: Ajustar imagen a div

Perdonar el reflote, pero ya que me sale como primer resultado en google y tengo la respuesta voy a colaborar.
Supongamos que el div que contiene las imagenes tiene de id #divpadre, entonces con CSS, basta con crear esta regla:
Código CSS:
Ver original
  1. #divpadre img{
  2.     max-width: 100%;
  3. }
Automáticamente todas las imágenes que contenga #divpadre se les aplicará esta regla y van a reducirse hasta lo máximo que permita el contenedor.

Un saludo ^^
  #8 (permalink)  
Antiguo 29/04/2013, 15:13
Avatar de bNd170  
Fecha de Ingreso: agosto-2009
Ubicación: $this->setLocation('Valencia', 'Spain');
Mensajes: 365
Antigüedad: 8 años, 3 meses
Puntos: 13
Respuesta: Ajustar imagen a div

Cita:
Iniciado por Dekadence Ver Mensaje
Perdonar el reflote, pero ya que me sale como primer resultado en google y tengo la respuesta voy a colaborar.
Supongamos que el div que contiene las imagenes tiene de id #divpadre, entonces con CSS, basta con crear esta regla:
Código CSS:
Ver original
  1. #divpadre img{
  2.     max-width: 100%;
  3. }
Automáticamente todas las imágenes que contenga #divpadre se les aplicará esta regla y van a reducirse hasta lo máximo que permita el contenedor.

Un saludo ^^
Lo quiere poner como un fondo, no con una imagen html, esta es una solución fácil, pero no es la solución a lo que buscaba el chico.
  #9 (permalink)  
Antiguo 29/04/2013, 15:28
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Ajustar imagen a div

Cita:
Iniciado por bNd170 Ver Mensaje
Lo quiere poner como un fondo, no con una imagen html, esta es una solución fácil, pero no es la solución a lo que buscaba el chico.
Bueno, como apunta(ba) kseso? puede usarse background-size, que a día de hoy ese documento ya ha pasado a ser candidato a recomendación. Además está ampliamente introducido en los navegadores.

Alguna de estas valdrían para el caso.
Código CSS:
Ver original
  1. background-size: 300px 300px;
  2. background-size: 100% 100%;
  3. background-size: cover;

Aunque la respuesta de Dekadence es la respuesta ideal a raíz del título, ya que imagen no es fondo.
  #10 (permalink)  
Antiguo 29/04/2013, 16:56
 
Fecha de Ingreso: mayo-2009
Mensajes: 729
Antigüedad: 8 años, 6 meses
Puntos: 6
Respuesta: Ajustar imagen a div

Hola. Gracias a todos por contestar a un tema de hace casi tres años. Efectivamente, en su momento, el css3 tenia el problema de aceptación de los navegadores. Hoy en día, ese problema no estal, por lo que las soluciones que habeis dado son válidas. En mi caso, suelo usar algo parecido a lo que dió pzin.

Saludos.

Etiquetas: Ninguno
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 14:45.