Porfavor, problemas con un <DIV >

rube · #1 (**permalink**) 02/07/2008, 16:31

hola de nuevo, tengo un problemilla tengo una imagen 1024x600 yquiero q se ajuste al tamaño del DIV, utilizo la sentencia:

background: url(bb_tt.png) no-repeat top left;

espero q me ayuden gracias.

dacho · #2 (**permalink**) 02/07/2008, 16:50

holas, Rube. Yo no conozco una propiedad que achique el tamaño del background de un elemento, no lo conozco porque es a mi entender una mala practica poner una imagen de 1024x600 para un div que tiene otro tamaño.

Motivos:
1- Calidad: al cambiar el tamaño de un fondo o algo asi con html, nunca vi que no se pierda calidad en la imagen.
2- Tamaño de la imagen: el tomar una imagen grande y achicarla con el codigo no tiene sentido y ensima la imagen es mucho mas grande en cuanto a su "peso" digamos, es decir siempre una imagen de 1024x600 px pesara mucho mas que una de 500 x 300 px en la misma calidad.

Solucion: Editar la imagen con algun programa y adapatar el tamaño de la imagen al tamaño del div y no al revez.

Si el tamaño del div es variable, estas en un problema y te diria bastante complejo. Que al menos yo no he podido resolver aun.

Saludos, Espero que te ayude mi comentario.
Damian.

Mikmoro · #3 (**permalink**) 02/07/2008, 16:51

Lamentablemente usándola como fondo una imagen no se puede adaptar al tamaño de la caja (div).

Mikel.

Mikmoro · #4 (**permalink**) 02/07/2008, 16:59

La forma de hacer que se adapte es la siguiente:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#caja {width: 400px; height: 300px;position: relative;}
#caja img {width: 100%; height: 100%; position: absolute; top:0; left:0;}
</style>
</head>
<body>
<div id="caja"><img src="tu_imagen.jpg" />
</div>
</body>
</html>

En la que pongo position: absolute; para que permita que haya otros contenidos en esa caja que se pongan sonbre la imagen, y position: relative; a la caja para que la posición absoluta de la imagen sea con respecto a ésta.

Evidentemente, como te ha dicho dacho, la imagen se deformará para adaptarse. Es imprescindible que la caja tenga un tamaño asignado tanto de alto como de ancho.

Mikel.

daPhyre · #5 (**permalink**) 02/07/2008, 17:02

Si no me equivoco, creo que de esta forma podrías hacerlo:

Código HTML:

<style type="text/css">
#contenedor{position:absolute;height:100%;width:100%;}
#contenedor img{width:100%;height:100%;}
</style>
<div>
<div class="contenedor"><img src="imagen.png"></div>
Contenido...
</div>

Ahora, como sabrás, no es muy recomendado, hay miles de razones, posiblemente la principal es que la imagen termina distorcionandoce. ¡Suerte!

Edición: Veo que Mikel me ha ganado esta vez