Foros del Web » Creando para Internet » CSS »

Autoagrandar imagen veticalmente (no repetirla...)

Estas en el tema de Autoagrandar imagen veticalmente (no repetirla...) en el foro de CSS en Foros del Web. Buenas Un día me percaté manejando imágenes .png con transparencia que el Internet Explorer 6 a través de un filtro podía ver imágenes con transparencia, ...
  #1 (permalink)  
Antiguo 22/11/2008, 19:15
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
De acuerdo Autoagrandar imagen veticalmente (no repetirla...)

Buenas

Un día me percaté manejando imágenes .png con transparencia que el Internet Explorer 6 a través de un filtro podía ver imágenes con transparencia, pero, que además de eso, podía autoagrandar las imágenes sin problemas. (con szingMethod scale)

Me explico.

Usando esto como css:
Código HTML:
.bgMenu{ 
  background: none; 
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="imgs/bgMenu.png", sizingMethod="scale"); 
}
Y suponiendo que esa imagen solo mide 10 pixels de ancho, si usamos el estilo en una celda de 100 pixels de ancho, la imagen no se repite una y otra vez a lo largo de la x sino que se adapta a los 100 pixels.

Pongo un ejemplo visual:
La imagen superior tiene tamaño real.
La imagen inferior está aplicada mediante el css citado anteriormenet en una tabla con una anchura muy superior al ancho real de la imagen.


Vale, la cuestión es que esto funciona perfectamente en el Internet Explorer, pero no así en el firefox.

¿hay algún modo de hacer esto mismo con el firefox mediante css?
Me veo obligado a usarlo en ciertos menús con degradados verticales y cuyo alto varía de menú a menú.

Saludos y gracias.
  #2 (permalink)  
Antiguo 23/11/2008, 12:05
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 2 meses
Puntos: 2
Respuesta: Autoagrandar imagen veticalmente (no repetirla...)

mira, creo que es mas fácil isa, para agrandar una img en ff y en IE tenga otro tamaño:

/*CSS*/
img.grande {
/*medidas FF*/
width:200px;
height:200px;
/*medidas IE*/
//widht:500px;
//height:500px;
}

ahora el código html:

<img class="grande" src="tu-imagen.jpg" />

Breve explicación:

FF toma la "//" como un comentario, así que no interpreta lo que esta después, pero IE no acepta comentarios de "//" entonces lo toma como parte del código.
__________________
Visita la mejor web: http://infoadictos.net
  #3 (permalink)  
Antiguo 23/11/2008, 12:11
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
Respuesta: Autoagrandar imagen veticalmente (no repetirla...)

La cuestión no es dar un tamaño en el firefox y otro en el IE.

Se trata de que una imagen se autoamplie en los 2 exploradores. Ya lo hace en el IE.
  #4 (permalink)  
Antiguo 23/11/2008, 12:22
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 2 meses
Puntos: 2
Respuesta: Autoagrandar imagen veticalmente (no repetirla...)

y bueno, ponele el tamaño que desees en cada nevegador

(si no por ahi estoy interpretando mal el problema)
__________________
Visita la mejor web: http://infoadictos.net
  #5 (permalink)  
Antiguo 23/11/2008, 12:27
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
Respuesta: Autoagrandar imagen veticalmente (no repetirla...)

Cita:
Iniciado por shurshok Ver Mensaje
(si no por ahi estoy interpretando mal el problema)
Si, lo estás interpretando mal.

Se trata de que una imagen se autoamplie sola en los 2 exploradores. Es decir, que no tenga que darle las dimensiones X o Y, sino que se adapte a la tabla o contendor en el que esté por ella misma.
  #6 (permalink)  
Antiguo 23/11/2008, 12:33
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 2 meses
Puntos: 2
Respuesta: Autoagrandar imagen veticalmente (no repetirla...)

ahh, entonces ponle un padding (creo que servirá) de 0px hasta cada borde.
__________________
Visita la mejor web: http://infoadictos.net
  #7 (permalink)  
Antiguo 23/11/2008, 12:45
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
Respuesta: Autoagrandar imagen veticalmente (no repetirla...)

Cita:
Iniciado por shurshok Ver Mensaje
ahh, entonces ponle un padding (creo que servirá) de 0px hasta cada borde.
¿Podrías explicarlo mejor?
¿O bien poner un ejemplo simple donde una imagen aumente su altura en 2 tablas o divs de diferente algura?

Gracias.
  #8 (permalink)  
Antiguo 23/11/2008, 13:03
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 2 meses
Puntos: 2
Respuesta: Autoagrandar imagen veticalmente (no repetirla...)

bueno, no se si funcionaria, pero aqui va ejemplo:

/*CSS*/

div.tabla1 {
width:500px;
height:500px;
}

div.tabla2 {
width:50px;
height:50px;
}

img.resizable {
padding:0px;
}

HTML:

<div class="tabla1"><img class="resizable" src="tu-imagen.jpg"></div>
<div class="tabla2"><img class="resizable" src="tu-imagen.jpg"></div>

digo una vez mas que no se si funcionara.
__________________
Visita la mejor web: http://infoadictos.net
  #9 (permalink)  
Antiguo 23/11/2008, 13:46
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
Respuesta: Autoagrandar imagen veticalmente (no repetirla...)

Cita:
Iniciado por shurshok Ver Mensaje
bueno, no se si funcionaria, pero aqui va ejemplo:

digo una vez mas que no se si funcionara.
No tira no.
  #10 (permalink)  
Antiguo 23/11/2008, 18:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Autoagrandar imagen veticalmente (no repetirla...)

Si no te importa que la imagen se pixele o deforme, como de hecho lo hace en el ejemplo que pones, puedes usar esta técnica:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>IMAC</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.caja {width: 800px;height: 60px;position: relative;}
.caja img {width:100%; height: 60px;position: absolute; top: 0; left:0;}
span {position: relative;color: #fff}
</style>
</head>
<body>
<div class="caja">
<img src="tuimagen.jpg" alt="foto" />
<span>Texto dentro de esa caja</span>
</div>
</body>
</html>
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 24/11/2008, 06:03
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
De acuerdo Respuesta: Autoagrandar imagen veticalmente (no repetirla...)

Cita:
Iniciado por Mikmoro Ver Mensaje
Si no te importa que la imagen se pixele o deforme, como de hecho lo hace en el ejemplo que pones, puedes usar esta técnica:
No me importa que se deforme porque no se pixelará a penas. El ejemplo que puse es muy exagerado y no será en base a esa imagen.

Mil gracias Mikmoro ;)
¡¡Eso es exactamente lo que andaba buscando!!!
  #12 (permalink)  
Antiguo 24/11/2008, 06:13
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Autoagrandar imagen veticalmente (no repetirla...)

De nada, es un placer.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 24/11/2008, 12:13
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
Respuesta: Autoagrandar imagen veticalmente (no repetirla...)

Cita:
Iniciado por Mikmoro Ver Mensaje
De nada, es un placer.
Vaya, ahora que lo pienso...
No es exatamente lo que quería :)


¿Se podría hacer que la imagen estuviera de fondo?
Más que nada es porque estaba pensada para un menú,y claro, hay que meter texto encima.

Saludos.
  #14 (permalink)  
Antiguo 24/11/2008, 12:22
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Autoagrandar imagen veticalmente (no repetirla...)

No te estás fijando mucho.

Como fondo no se puede hacer deformable.

¿Has visto el ejemplo? Tiene texto encima. Para eso es la posición absoluta de la imagen y la relativa del span.
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 24/11/2008, 12:40
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
Respuesta: Autoagrandar imagen veticalmente (no repetirla...)

Cita:
Iniciado por Mikmoro Ver Mensaje
No te estás fijando mucho.

Como fondo no se puede hacer deformable.

¿Has visto el ejemplo? Tiene texto encima. Para eso es la posición absoluta de la imagen y la relativa del span.
¡Jajajaj!
Lo vi al terminar de publicar la respuesta, de todos modos prefería que estuviera de background de verdad, pero visto que no es posible me conformaré.

No hay ningún problema en usar este procedimiento para un menú ¿no?

Gracias.
  #16 (permalink)  
Antiguo 24/11/2008, 12:45
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Autoagrandar imagen veticalmente (no repetirla...)

No debería, pero todo dependerá de cómo hagas el resto de cosas. Nadie te puede garantizar que no haya algo que te pueda afectar.
__________________
Visita mi nueva web idplus.org
  #17 (permalink)  
Antiguo 24/11/2008, 13:21
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
De acuerdo Respuesta: Autoagrandar imagen veticalmente (no repetirla...)

Una cuestión.
Ahora intento aplicar este css a uno de mis menús.

¿Por qué aquí los estilos empiezan con . y no con #?
Si lo cambio no funciona.
Código HTML:
.caja {
	width: 10px;
	height: 300px;
	position: relative;
}
.caja img {
	width:70px;
	height: 100%;
	position: absolute; 
	top: 0; 
	left:0;
}

Yo tengo un menú con su estilo principal así:
Código HTML:
#menuv {
	border-width: 1px 1px 0 1px;
	width: 198px;
	height: 329px;
	font-style: bold; 
	font: 80% Arial, Helvetica, sans-serif;

}
Y claro, había pensado en poner algo tal que así:
Código HTML:
.menuv img {
	height: 100%;
	width: 198px;
	position: absolute;
	top: 0;
	left:0;
}
Pero logicamente de nuevo mi desconocimiento del lenguaje no me permite entender como funciona esto...
Me pondría con más calma a leer un manual, pero no dispongo de mucho tiempo ahora...

Siento hacer tantas preguntas al comienzo, me voy a acabar ganando el apodo de "cansino" :P
  #18 (permalink)  
Antiguo 24/11/2008, 19:43
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Autoagrandar imagen veticalmente (no repetirla...)

Cita:
Me pondría con más calma a leer un manual, pero no dispongo de mucho tiempo ahora...
La pregunta es...
¿Que te hace pensar que los demás tenemos ese tiempo?
y...
¿Que te hace pensar que nuestro tiempo es menos valido que el tuyo?

Aresillo!!
PD: LLevas 6 temas en dos días... creo que deberías pensar en dedicar un poco de tiempo a leer...
  #19 (permalink)  
Antiguo 25/11/2008, 09:19
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
De acuerdo Respuesta: Autoagrandar imagen veticalmente (no repetirla...)

Cita:
Iniciado por Aresillo Ver Mensaje
La pregunta es...
¿Que te hace pensar que los demás tenemos ese tiempo?
y...
¿Que te hace pensar que nuestro tiempo es menos valido que el tuyo?
La cuestión es que corregir un fallo tonto me puede llevar a mi 2 o 3 horas y a vosotros os puede llevar menos de 1 minuto.
No se, yo cuando me meto en un foro de css a preguntar presupongo que sabrán de css, y por lo tanto espero que puedan solucionar mis dudas. Vamos, para eso están los foros ¿no?
Yo al menos suelo ayudar cuando conozco la respuesta, no se tu...

Si, llevo 6 temas en 2 días, lo se, pero no pretendas que estudie css a fondo en 5 días... Lo que si que puedo hacer en 5 días es apañármelas para lograr lo que quiero hacer y luego ya me pondría con tiempo a estudiar css, que por mi lo haría ahora, pero lamentablemente no dispongo de tiempo.

Que sepas que a mi tampoco me hace gracia tener que preguntar cosas cada 2 por tres.
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 18:48.