[SOLUCIONADO] Ajustar imagen a div

[AitorLopez]

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.

[Omegakenshin]

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...

[AitorLopez]

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.

[kseso?]

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.

[AitorLopez]

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.

[rb3m]

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.

[Dekadence]

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:

#divpadre img{
    max-width: 100%;
}
 

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 ^^

[bNd170]

Iniciado por Dekadence

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:

#divpadre img{
    max-width: 100%;
}
 

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.

[pzin]

Iniciado por bNd170

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:

background-size: 300px 300px;
background-size: 100% 100%;
background-size: cover;
 

Aunque la respuesta de Dekadence es la respuesta ideal a raíz del título, ya que imagen no es fondo.

[AitorLopez]

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.