autoresize de imagenes con css

bambuweb · #1 (**permalink**) 16/09/2010, 07:24

Buenas a todos!

Tengo el siguiente problema:

Estoy probando un cms que es buenisimo (concrete5.org) y basicamente lo que quiero lograr es que si un cliente sube una imagen muy ancha al contenido, automaticamente se achique al tamaño maximo que yo asigne, manteniendo las proporciones.

Encontre esta porcion de codigo en un sitio que funciona muy bien... exceptuando claro, y cuando no, a Internet Explorer. La version que no funciona es la 8, lo cual me preocupa un poco ya que actualmente es la mas utilizada.

Este es el codigo:

Código CSS:

Ver original#post_view img { 
max-width: 620px;
height: auto !important;
width: expression(this.width > 620 ? 620: true);
}

donde post_view obviamente es el nombre del div que contiene la o las imagenes a achicar, y 620px la medida maxima que arbitrariamente puedo manejar.

A alguien se le ocurre una manera de que funcione este codigo en IE8, o se le ocurre otra manera para llegar al mismo resultado?

Gracias de antemano, y saludos para todos!

DragonX · #2 (**permalink**) 16/09/2010, 09:20

mira esto http://eric.polerecky.com/archives/i...tandards-mode/

bambuweb · #3 (**permalink**) 16/09/2010, 09:33

Ya le pego una mirada y te cuento a ver qué onda.

PD: Buenísima tu web, me gusta la tendencia q tiene!

bambuweb · #4 (**permalink**) 16/09/2010, 12:02

Bueno, puedo dejar un par de notas con respecto a esto:

1º: la linea width:expression ya no tiene ningún sentido (tal vez sirva en IE7 o IE6, pero no lo sé)

El resto de las notas aplican a este codigo css:

Código CSS:

Ver original#post_view img { 
max-width: 620px;
height: auto !important;
}

2º: el flamante IE9 muestra perfectamente las imagenes achicadas y escaladas.

3º: IE8 solo las muestra correctamente si el modo "vista de compatibilidad" está activado

4º: Alguien sabe si hay estadisticas de uso sobre la vista de compatibilidad? es decir, si el 99% de los usuarios de ie8 usan esta modalidad, entonces el problema estaria resuelto. Pero si solo la utiliza el 20%, entonces sigo teniendo un problema.

5º: gracias al link q me envio dragonx pude ver que las expresiones js en css no tienen sentido en los navegadores actuales (todas las versiones de FF, Opera, Safari y Chrome, ademas de IE8 en adelante)

Saludos!

PD: Todavía no pude solucionar nada... alguna idea?

bambuweb · #5 (**permalink**) 16/09/2010, 13:51

Creo haber encontrado una posible solucion:

usando este codigo css:

Código CSS:

Ver original#post_view img { 
max-width: 620px;
height: auto !important;
}

donde post_view es el id del div, y el valor de max-width obviamente es el ancho maximo permitido (valga la redundancia).

Esto funciona bien, excepto en IE8. Para solucionar esto, se puede agregar esta linea justo despues de abrir el head en el archivo html:

Código HTML:

Ver original<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
</head>

Esta linea "obliga" al IE8 a activar el modo compatibilidad y voalá!

Por el momento funciona bien. Dejo el listado de navegadores que probe:

Chrome 6

Firefox 3.6

IE8

IE9

Opera 10

Safari 4

Saludos!