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:
