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

Question

Tengo una imagen con este marcado

<img src="wedding_00.jpg" width="900" height="600" />

Y estoy usando CSS para reducir a 600px de ancho, así:

img {
    max-width:600px;
    height:auto;
}

¿Alguien puede explicar por qué este método funciona en modo de Compatibilidad, pero no en el modo estándar?Hay una manera que puedo modificar mi CSS para que funcione en modo estándar?

Me doy cuenta de que si me tira el

width="900" height="600"

que se soluciona el problema, pero que no es una opción que tengo.

Answer 1

No estoy seguro de la causa raíz, pero si se agrega

width: auto;

entonces funciona.

Answer 2

conjunto width:inherit para IE8

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

Answer 3

Wow, me salvó un montón de tiempo allí!

he tenido un problema similar con una imagen en la posición:absoluta donde el ancho fue por arte de magia tomar ancho máximo valor.Su extraño porque no hacerlo cuando la imagen no estaba en posición:absoluta.

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

funciona muy bien en IE8!

Answer 4

Vaya, qué dolor IE siempre parece ser. Aunque no existe una respuesta aceptada, me encontré con que no resolvió mi problema.

Después de mucha búsqueda me encontré con que la forma de solucionarlo es quitar la altura y la anchura de los atributos de las imágenes en cuestión. Una explicación puede encontrarse aquí: escalado de imágenes en IE8 con CSS max-anchura

El código es como sigue:

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 que tienden a utilizar jQuery tanto como sea posible, para resolver esto lo realizaba una serie de funciones diferentes para apuntar IE8 y hacer mi vida más fácil. También encontré que la solución casi funcionó, pero no del todo. Jugué un rato con él hasta que fue 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
            });
        }
    });       
}

Lo utilizo para apuntar a una función específica de carga de imágenes, pero podría añadirse a cualquier función o la carga documento listo ventana también.

Answer 5

Mi solución para este problema fue la siguiente:

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

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

Answer 6

ancho máximo de imágenes solo funciona bien en IE8 cuando es directamente envoltorio (div) tiene una anchura.

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

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

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

La imagen fija 700 px y hacer el diseño roto.

Solución: .wrapper1 { width: 50%; float: left; } // anchura de esta columna es 450px max; .wrapper2 { width 100%; float: left; } // si tiene frontera o material de relleno, la voluntad anchura menor 100%

La imagen se ajuste a la columna (image = 450px) cuando la ventana de cambio de tamaño más pequeño, la imagen será más pequeño basado en el ancho de wrapper2.

Saludos, Cuong cielo