Foros del Web » Creando para Internet » CSS »

Porfavor, problemas con un <DIV >

Estas en el tema de Porfavor, problemas con un <DIV > en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/07/2008, 16:31
 
Fecha de Ingreso: junio-2008
Mensajes: 64
Antigüedad: 15 años, 8 meses
Puntos: 0
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.
  #2 (permalink)  
Antiguo 02/07/2008, 16:50
Avatar de dacho  
Fecha de Ingreso: junio-2008
Ubicación: Argentina
Mensajes: 374
Antigüedad: 15 años, 9 meses
Puntos: 21
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.
  #3 (permalink)  
Antiguo 02/07/2008, 16:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
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.
  #4 (permalink)  
Antiguo 02/07/2008, 16:59
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
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.
  #5 (permalink)  
Antiguo 02/07/2008, 17:02
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años
Puntos: 142
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!

Edición: Veo que Mikel me ha ganado esta vez
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...

Última edición por daPhyre; 02/07/2008 a las 17:07
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 05:09.