Modo de no compatibilidad IE8, imagen con max-width y height: auto

Establecer width:inherit para ie8

 img {
   width:inherit; //for ie8
   max-width: 100%;
   height: auto;
 }

Wow, me ahorró mucho tiempo allí!

Tuve un problema similar con una imagen en posición: absolute donde width estaba tomando mágicamente el valor de max-width. Es raro porque no hace eso cuando la imagen no estaba en posición: absoluta.

width: auto; 
max-width: 200px; 
height: auto; 
max-height: 200px;

Funciona muy bien en IE8!

Wow, lo que es un dolor siempre parece ser. Aunque hay una respuesta aceptada, descubrí que no solucionaba mi problema.

Después de mucha búsqueda encontré que la manera de arreglarlo es eliminar los atributos de altura y anchura de las imágenes en cuestión. Una explicación se puede encontrar aquí: Escalar imágenes en IE8 con CSS max-width

El código es El siguiente:

CSS:

.entry img {
    max-width:615px
    height:auto;
}

SCRIPT

var imgs, i, w;
var imgs = document.getElementsByTagName( 'img' );
for( i = 0; i < imgs.length; i++ ) {
    w = imgs[i].getAttribute( 'width' );
    if ( 615 < w ) {
        imgs[i].removeAttribute( 'width' );
        imgs[i].removeAttribute( 'height' );
    }
}

Ahora tiendo a usar jQuery tanto como sea posible, para resolver esto utilicé algunas funciones diferentes para apuntar a IE8 y hacer mi vida más fácil. También descubrí que la solución casi funcionó, pero no del todo. Jugueteé con él hasta que fui capaz de lograr los resultados que estaba buscando. Mi solución es la siguiente:

JQUERY:

var maxWidth = 500;

function badBrowser(){
if($.browser.msie && parseInt($.browser.version) <= 8){
    return true;
}   
    return false;
}


if(badBrowser()){
    $('img').each(function(){
        var height = $(this).height();
        var width = $(this).width();
        if (width > maxWidth) {

            var ratio = (maxWidth /width)  
            $(this).css({
                "width":maxWidth,               
                "height":(ratio*height)
            });
            $(this).removeAttr('width'); 
            $(this).removeAttr('height');
        }else{
            $("#cropimage").css({
                "width":width,               
                "height":height
            });
        }
    });       
}

Utilizo esto para apuntar a una función de carga de imagen específica, pero también podría agregarse a cualquier función de carga de documentos o ventanas.

Mi solución para este problema fue:

  <!--[if IE 8]>
  <style>
   a.link img{
          max-height:500px ;
          width:auto !important;
          max-width:400px;
          height:auto !important;
          width:1px; 

        }
  </style>
  <![endif]-->  

Max-width of images just work fine on IE8 when it's directly wrapper (div) has width.

Ejemplo:
La imagen en este ejemplo es 700px; El ancho de la web es de 900px;

<div class="wrapper1"><div class="wrapper2"><img style="max-width: 100%;" src="abc.jpg" alt="Abc" /></div></div>

Si te gusta: .wrapper1 { width: 50%; float: left; } / / el ancho de esta columna es 450px max;

La imagen todavía 700px y hacer que el diseño roto.

Solución: .wrapper1 { width: 50%; float: left; } / / el ancho de esta columna es 450px max; .wrapper2 { width 100%; float: left; } // si tiene borde o relleno, el ancho será más pequeño 100%

La imagen se ajustará a la columna (image = 450px) cuando se redimensiona la ventana más pequeña, la imagen se reducirá en función del ancho de wrapper2.

Saludos,
Cuong Sky