Autoagrandar imagen veticalmente (no repetirla...)

IMAC/ · #1 (**permalink**) 22/11/2008, 19:15

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.

shurshok · #2 (**permalink**) 23/11/2008, 12:05

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.

IMAC/ · #3 (**permalink**) 23/11/2008, 12:11

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.

shurshok · #4 (**permalink**) 23/11/2008, 12:22

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

(si no por ahi estoy interpretando mal el problema)

IMAC/ · #5 (**permalink**) 23/11/2008, 12:27

Cita:

Iniciado por shurshok

(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.

shurshok · #6 (**permalink**) 23/11/2008, 12:33

ahh, entonces ponle un padding (creo que servirá) de 0px hasta cada borde.

IMAC/ · #7 (**permalink**) 23/11/2008, 12:45

Cita:

Iniciado por shurshok

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.

shurshok · #8 (**permalink**) 23/11/2008, 13:03

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.

IMAC/ · #9 (**permalink**) 23/11/2008, 13:46

Cita:

Iniciado por shurshok

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

digo una vez mas que no se si funcionara.

No tira no.

Mikmoro · #10 (**permalink**) 23/11/2008, 18:14

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>

IMAC/ · #11 (**permalink**) 24/11/2008, 06:03

Cita:

Iniciado por Mikmoro

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

Mikmoro · #12 (**permalink**) 24/11/2008, 06:13

De nada, es un placer.

IMAC/ · #13 (**permalink**) 24/11/2008, 12:13

Cita:

Iniciado por Mikmoro

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.

Mikmoro · #14 (**permalink**) 24/11/2008, 12:22

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.

IMAC/ · #15 (**permalink**) 24/11/2008, 12:40

Cita:

Iniciado por Mikmoro

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.

Mikmoro · #16 (**permalink**) 24/11/2008, 12:45

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.

IMAC/ · #17 (**permalink**) 24/11/2008, 13:21

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

Aresillo · #18 (**permalink**) 24/11/2008, 19:43

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...

IMAC/ · #19 (**permalink**) 25/11/2008, 09:19

Cita:

Iniciado por Aresillo

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.