modalità non-compatibilità IE8, un'immagine con max-width e height: auto

Question

Ho un'immagine con questo markup

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

E sto usando CSS per ridurre le dimensioni a 600px di larghezza, in questo modo:

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

Qualcuno può spiegare perché questo metodo funziona in modalità di compatibilità, ma non in modalità standard? C'è un modo posso modificare il mio CSS in modo che possa funzionare in modalità standard?

Mi rendo conto che se la spoglierò il

width="900" height="600"

che si risolve il problema, ma che non è un'opzione che ho.

Answer 1

Non sono sicuro che la causa principale, ma se si aggiunge

width: auto;

allora funziona.

Answer 2

Set width:inherit per IE8

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

Answer 3

Wow, mi ha salvato un sacco di tempo!

ho avuto un problema simile con un'immagine in posizione: in cui assoluta larghezza è stata magicamente prendendo valore max-width. E 'strano perché non fa che quando l'immagine non era in posizione:. Assoluto

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

grandi opere in IE8!

Answer 4

Wow, che un dolore di IE sembra sempre di essere. Anche se v'è una risposta accettato, ho scoperto che non ha risolto il mio problema.

Dopo molta ricerca ho trovato che il modo per risolvere il problema è quello di rimuovere l'altezza e la larghezza attributi dalle immagini in questione. Una spiegazione può essere trovata qui: Immagini Scaling in IE8 con i CSS max-width

Il codice è il seguente:

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

Ora tendo a usare jQuery, per quanto possibile, per risolvere questo ho usato un paio di funzioni diverse a bersaglio IE8 e rendere la vita più facile. Ho anche scoperto che la soluzione quasi funzionato, ma non del tutto. Ho giocato intorno con esso fino a quando sono stato in grado di raggiungere i risultati che cercavo. La mia soluzione è la seguente:

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

Io lo uso per indirizzare una funzione del carico un'immagine specifica, ma potrebbe essere aggiunto a qualsiasi funzione documento pronto o carico finestra pure.

Answer 5

La mia soluzione per questo problema è stato:

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

max-width di immagini solo funzionano bene su IE8 quando è direttamente involucro (div) ha larghezza.

Esempio:
L'immagine in questo esempio è 700px; La larghezza della web è 900px;

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

Se stile: .wrapper1 { width: 50%; float: left; } // larghezza di questa colonna è 450px max;

L'immagine fissa 700px e rendere il layout rotto.

Soluzione: .wrapper1 { width: 50%; float: left; } // larghezza di questa colonna è 450px max; .wrapper2 { width 100%; float: left; } // se ha bordo o padding, larghezza volontà minore 100%

L'immagine si adatta la colonna (image = 450px) quando la finestra di ridimensionamento più piccolo, immagine sarà più piccolo in base alla larghezza di wrapper2.

Saluti,
Cuong Sky