Foros del web, para los que viven de bits

rube · 02-jul-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 · 02-jul-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 · 02-jul-2008, 16:51

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

Mikel.

Mikmoro · 02-jul-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 · 02-jul-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

02-jul-2008, 16:31	#1 (permalink)
rube Fecha de Ingreso: junio-2008 Mensajes: 34	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.

02-jul-2008, 16:50	#2 (permalink)
dacho Fecha de Ingreso: junio-2008 Ubicación: Argentina Mensajes: 78	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.

02-jul-2008, 16:51	#3 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.998	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.

02-jul-2008, 16:59	#4 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.998	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.

02-jul-2008, 17:02	#5 (permalink)
daPhyre Fecha de Ingreso: marzo-2008 Ubicación: vhsa@tab.mx (Redirects to 127.0.0.1) Mensajes: 910	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> 京Cd௫京 fuegodigital.blogspot.com ¿Por qué dejar se usar tablas? Última edición por daPhyre; 02-jul-2008 a las 17:07.

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado