Foros del Web - Porfavor, problemas con un <DIV >

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - Porfavor, problemas con un <DIV > (http://www.forosdelweb.com/f53/porfavor-problemas-con-div-602269/)

rube	02/07/2008 16:31

Porfavor, problemas con un <DIV >

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

02/07/2008 16:50

Respuesta: Porfavor, problemas con un <DIV >

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

02/07/2008 16:51

Respuesta: Porfavor, problemas con un <DIV >

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

Mikel.

Mikmoro

02/07/2008 16:59

Respuesta: Porfavor, problemas con un <DIV >

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

02/07/2008 17:02

Respuesta: Porfavor, problemas con un <DIV >

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! :si:

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

La zona horaria es GMT -6. Ahora son las 20:56.