32 votos

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

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.

73voto

Greg Puntos 132247

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

width: auto;

entonces funciona.

7voto

Vicky Puntos 124

set width:inherit para ie8

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

4voto

user545493 Puntos 51

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

he tenido un problema similar con una imagen en position: absolute 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 la position: absolute.

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

funciona muy bien en IE8!

2voto

Russell Shingleton Puntos 1786

Wow, lo que es un dolor decir, siempre parece ser. Aunque no se acepta la respuesta, me encontré con que no soluciona mi problema.

Después de mucho buscar he encontrado que la manera de solucionarlo es para quitar los atributos de altura y anchura de las imágenes en cuestión. Una explicación puede encontrarse aquí: Escalado de Imágenes en IE8 con CSS max-width

El código es el siguiente:

CSS:

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

Secuencia de COMANDOS

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 solucionar esto he utilizado un par de funciones diferentes a la de destino IE8 y hacer mi vida más fácil. También encontré que la solución trabajado casi, pero no del todo. He jugado 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
            });
        }
    });       
}

Yo uso este para apuntar a una imagen específica en función de la carga, pero podría ser añadido a cualquier documento o ventana en función de la carga así.

0voto

Andrei Puntos 1

Mi solución para este problema:

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

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X