Problema para centrar una imagen en tabla con IE7

[laexpo]

Hola a todos!

Tengo un problema bastante molesto para centrar una imagen con max-width dentro de una tabla cuando lo veo en IE7. Como la imagen viene desde la base de datos, no sé su proporción ni tamaño, por ende es necesario que se ajuste a su contenedor (que debe tener 200px x 200px) con la propiedad anteriormente citada. Cuando la imagen es de proporción vertical el max-height funciona perfectamente en todos los navegadores, pero cuando es horizontal y actúa max-width, IE7 corre la imagen a la derecha. Les paso códigos y una imagen de lo que sucede.

Espero alguien me pueda ayudar a detectar y resolver el error.

HTML

Código HTML:

<div class="thumbnail">
  <table width="200px" height="200px" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td style="vertical-align:middle; text-align:center">
        <img class="mini_image" src="imgs/image-500-horizontal.jpg" />
      </td>
    </tr>
  </table>
</div> 

CSS

Código HTML:

.thumbnail {
	height: 200px;
	width: 200px;
	border: 2px solid #000000;
	margin-top: 50px;
	margin-left: 50px;
	float: left;
}
.thumbnail .mini_image {
	max-height:200px;
	max-width:200px;
	margin: 0px auto;
	width: expression(this.width > 200 ? 200: true);
	padding:0;
}

Ejemplo del error:

[emprear]

ya te contesté hace varios dias aqui
http://www.forosdelweb.com/f4/proble...0/#post3959578

[laexpo]

Gracias por tu respuesta. Sin embargo, cuando lo hago de la manera en que recomendás, sigue sucediendo lo mismo, no logro el efecto buscado, el tamaño de la tabla cuando la imagen en proporción horizontal, vuelve a modificarse. Yo necesito que quede centrada en la tabla cuadrada, sin que cambie los valores de la misma.

Seguiré buscando una solución.

Gracias nuevamente.

[emprear]

laexpo:

Vaya problema que planteaste.
En primer lugar te aclaro, no tengo IE7 ni IE8, así que todas mis pruebas las hice con las vistas de compatibilidad que trae IE9.

No te explico todas las cosas que intenté, porque más que un post, escribiría un libro.
Así y todo conseguí algo que quizás te sirva

Arreglar lo del IE7, es fácil, pero adiviná... en IE8 se transforma en un desastre.
El problema mayor es que al hacer divs o celdas individuales contenedoras de la imagen y aplicarles a todas el mismo estilo, segun el tamaño de la imagen supere o no el ancho u alto, vienen los problemas. Tus imágenes vienen de una base de datos, lo que no precisas es si lo que esta en la bd es el path a la imagen, o estan en un blob.
Si fuese lo primero, podrias obtener el dato del tamaño con getimagesize() y en funcion de eso aplicar un estilo u otro. Ante la duda, encontré una solucon más universal para las miniaturas.

Te dejo una demo, es lo máximo que pude lograr
probada en Safari 5, FF5, Chrome, Opera 11, IE9 (compatibilidad 7/8/Qm)

http://foros.emprear.com/css/imgcel/imgcel3.html

Saludos

[laexpo]

Genial, Emprear! Gracias por la respuesta nuevamente. Voy a probar en base a la demo que me estás enviando, quizás tenga que ir por otro camino como planteas, intentando que funcione correctamente en todos los navegadores.

Espero que sirva. Gracias por tomarte el tiempo y ayudarme en este problema.

Saludos.