IE8 Modo de não compatibilidade, imagem com largura máxima e altura: Auto

Question

Eu tenho uma imagem com esta marcação

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

E estou usando o CSS para reduzir o tamanho da largura de 600px, assim:

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

Alguém pode explicar por que esse método funciona no modo de compatibilidade, mas não no modo padrão? Existe uma maneira de modificar meu CSS para que ele funcione no modo padrão?

Eu percebo que se eu despojar o

width="900" height="600"

que resolve o problema, mas essa não é uma opção que eu tenho.

Answer 1

Não tenho certeza da causa raiz, mas se você adicionar

width: auto;

Então funciona.

Answer 2

definir width:inherit para o IE8

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

Answer 3

Uau, me salvou muito tempo lá!

Eu tive um problema semelhante com uma imagem em posição: absoluta onde a largura estava magicamente assumindo o valor de largura máxima. É estranho porque não faz isso quando a imagem não estava em posição: absoluta.

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

Funciona muito bem no IE8!

Answer 4

Uau, que dor, eu sempre parece ser. Embora exista uma resposta aceita, descobri que ela não resolveu meu problema.

Depois de muita pesquisa, descobri que a maneira de corrigi -la é remover os atributos de altura e largura das imagens em questão. Uma explicação pode ser encontrada aqui: Escalando imagens no IE8 com CSS max-lar

O código é o seguinte:

CSS:

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

ROTEIRO

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' );
    }
}

Agora, tendem a usar o jQuery o máximo possível, para resolver isso, usei algumas funções diferentes para atingir o IE8 e facilitar minha vida. Eu também descobri que a solução quase funcionava, mas não exatamente. Eu brinquei com isso até conseguir alcançar os resultados que estava procurando. Minha solução é a seguinte:

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
            });
        }
    });       
}

Eu uso isso para direcionar uma função de carga de imagem específica, mas também pode ser adicionada a qualquer função pronta ou de carga da janela do documento.

Answer 5

Minha solução para esta questão foi:

  <!--[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

A largura máxima das imagens funciona bem no IE8 quando é diretamente o wrapper (div) tem largura.

Exemplo:
A imagem neste exemplo é 700px; A largura da Web é 900px;

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

Se você estilo:.wrapper1 { width: 50%; float: left; } // A largura desta coluna é de 450px max;

A imagem ainda 700px e deixa o layout quebrado.

Solução:.wrapper1 { width: 50%; float: left; } // A largura desta coluna é de 450px max;.wrapper2 { width 100%; float: left; } // Se tiver borda ou preenchimento, a largura será menor 100%

A imagem caberá na coluna (imagem = 450px) Quando redimensionar a janela menor, a imagem será menor com base na largura do wrapper2.

Cumprimentos,
Cuong Sky