background-image, backround-size - no funciona bien

[LLap]

Buenas. Creo que es el subforo adecuado.

Tengo un problema con backround-size y es que parece que no afecta a la imagen...

Este es el trozo de código del fichero de estilos:

Código HTML:

span.thumb_p{ height: 100px; display: block; width: 100%; 
background-position: bottom center; background-repeat: no-repeat;
background-image: url( images/imagen.jpg ); background-size: 50px 25px }

La verdad es que tenia que especificar un tamaño para la imagen y las otras cosas que he probado no dan el resultado deseado.

Ideas?

Gracias

[DaChux]

Buenas LLap. Danos más pistas, que navegador estas usando? supongo que sabes, que esa propiedad ha sido introducida en css3, con lo cual solo funcionara en navegadores que lo soporten.

Para navegador específico tienes

-o-background-size
-webkit-background-size
-khtml-background-size
-moz-background-size

[LLap]

mmm, entiendo.
He estado mirando y lo he conseguido ver bien en Firefox [-moz-background-size] (que es uno de los que tenia a mano).

El problema es que veo que IE aún no soporta nada de esto y como tengo que hacerlo lo más compatible con todo dentro de lo posible pues creo que no me va a servir este método.

Voy a explicar lo que pretendo.

Partimos de esto:

Código HTML:

<a class="clicka" href="url.en.cuestion.com" title="Titulo"> 
<span class="thumb_p" style="background-image: url(' images/imagen.jpg ' )" >
 &nbsp; </span>Descripción</a> 

Donde el estilo "clicka" esta definido así:

Código HTML:

*.clicka{ color: black; display: block; padding: .5em; 
border-bottom: 1px solid #FFFFFF; margin: 0; cursor: pointer }

y el "thumb_p" así:

Código HTML:

span.thumb_p{ height: 120px; display: block; width: 100%; 
background-position: bottom center; background-repeat: no-repeat }

Pues bien el problema es que necesito especificar un tamaño concreto para la imagen "background_image", pero ya que parece que IE no lo soporta como he comentado arriba, pues se me ha ocurrido poner la imagen no como background sino normal así:

Código HTML:

<a class="clicka" href="url.en.cuestion.com" title="Titulo"> 
<span class="thumb_p" > &nbsp; 
<img src="images/imagen.jpg" width="50" height="25"> </span> Descripción</a> 

Pues bien, se muestra correctamente, pero me aparece otro problema con IE ( los otros navegadores van bien) y es que al hacer click a la imagen no sigue la URL, tengo que hacer click en el texto "descripción" sino no hace nada...

Gracias por cualquier idea

[ArturoGallegos]

si pretendes que la imagen siempre tenga el mismo tamaño, porque no solo la abres con un editor de imágenes y la redimencionas al tamaño deseado de esa forma no es necesario especificar el tamaño de la imagen.

aparte siempre es mucho mejor usar las imágenes del tamaño que se necesitan y no estar redimencionando directamente con el html o css.

[LLap]

Iniciado por Ag666

si pretendes que la imagen siempre tenga el mismo tamaño, porque no solo la abres con un editor de imágenes y la redimencionas al tamaño deseado de esa forma no es necesario especificar el tamaño de la imagen.

aparte siempre es mucho mejor usar las imágenes del tamaño que se necesitan y no estar redimencionando directamente con el html o css.

Bueno en realidad esto es solo un ejemplo. La imagen tiene un máximo de altura y anchura. (para que no sobresalga de su espacio).

De hecho antes hacia lo que comentas con funciones PHP, pero me surge un problema y es que tengo que hacer lo mismo desde javascript y claro, no puedo llamar a una función php desde allí...

No se si me explico. Algo más detallado:
- Cuando carga la pagina principal se generan X imágenes en sus recuadros pero luego entran en juego una serie de scripts que cada 10 segundos cambian estas imágenes por otras (entre otras cosas)

[DaChux]

Bueno, ahora estamos en otro punto diferente.
Si quieres cambiar las imágenes de tamaño en "tiempo real" con javascript lo tienes facil.

por ejemplo, con jquery, y suponiendo esto

Código:

<img id="imagen" src="rutaDeMiImagen.jpg" />

tendriamos, por ejemplo

Código:

$("#imagen").css('width',300);

o le puedes mandar directamente un array con la anchura y altura, o en vez de cambiar el css directamente con jquery puedes cambiar los atributos height y width....

Mira a ver si te sirve.

[LLap]

Hola de nuevo. Perdón por tardar en responder pero estoy que no me lo atrapo xD

Lo que comentas DaChux puede ser interesante aunque no se si se notaria mas lenta la web.
Aún así no he sabido aplicarlo para probar ya que de javascript no se casi nada (lo mínimo) y con las indicaciones que me has dado no se como empezar.

Había intentado algo, pero muchas imágenes no se si no cargaban a tiempo o que pasaba pero la función tamaño me devolvía 0, 0 y claro no se mostraban:

Código:

var i = new Image();
	i.src = source;
	var w =i.width;
	var h = i.height;
	var t = tamaño(120, 190, w, h);
	
	var code = sprintf( '<div class=\"tr\"><a class=\"clicka\" href=\"%s\"
  title=\"%s\"><span class=\"thumb_p\" > <img src=\"%s\" %s> </span>%s</a>
</div>', url, _data.title, img, mides,  _data.title );

Código:

function tamaño(maxWidth , maxHeight, w, h) {
  

  if (w > maxWidth || h > maxHeight) {
  if (w > h) {
    h = (h * maxWidth) / w;
    w = maxWidth;
  }
  else {
    w = (w * maxHeight) / h;
    h = maxHeight;
  }
}

var tam= sprintf ('width=\"%s px\" height=\"%s px\"', w, h);
return 	tam;
}

[1r15h]

No acabo d entender lo que quieres hacer..
Quieres que la imagen tambien sea link?? :D