internet-explorer-8 - una - predeterminar emulacion internet explorer

Modo IE8 no compatible, imagen con ancho máximo y alto: automático

Question

Tengo una imagen con este marcado

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

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

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

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

Me doy cuenta de que si elimino el

width="900" height="600"

que resuelve el problema, pero esa no es una opción que tengo.

Answer 1

¡Guau, me ahorraste mucho tiempo allí!

Tuve un problema similar con una imagen en posición: absoluta donde el ancho tomaba mágicamente el valor de ancho máximo. Es extraño 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!

Answer 2

El ancho máximo de las imágenes solo funciona bien en IE8 cuando su envoltura directa (div) tiene ancho.

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 tu estilo: .wrapper1 { width: 50%; float: left; } .wrapper1 { width: 50%; float: left; } .wrapper1 { width: 50%; float: left; } // el ancho de esta columna es 450px max;

La imagen sigue siendo 700px y hace que el diseño se rompa.

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

La imagen se ajustará a la columna (imagen = 450 píxeles) cuando la ventana de cambio de tamaño sea más pequeña, la imagen será más pequeña según el ancho de wrapper2.

Saludos,
Cuong Sky

Answer 3

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]-->  

Answer 4

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

width: auto;

entonces funciona

Answer 5

Wow, qué dolor IE siempre parece ser. Aunque hay una respuesta aceptada, descubrí que no resolvió mi problema.

Después de mucha búsqueda encontré que la forma de solucionarlo es eliminar los atributos de altura y ancho de las imágenes en cuestión. Aquí puede encontrar una explicación: Escalar imágenes en IE8 con CSS max-width

El código es el siguiente:

CSS:

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

GUIÓN

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 usé algunas funciones diferentes para apuntar a IE8 y hacer mi vida más fácil. También encontré que la solución casi funcionaba, pero no del todo. Jugué con eso hasta que pude 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 documento preparado o de carga de ventana.

Answer 6

establecer width:inherit para ie8

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