IE8 nicht-Kompatibilitätsmodus, Bild mit max-Breite und Höhe: auto

Question

Ich habe ein Bild mit diesem Markup

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

Und ich bin mit CSS es zu verkleinern, um 600px Breite, etwa so:

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

erklären kann jemand, warum diese Methode im Kompatibilitätsmodus arbeitet, aber nicht im Standard-Modus? Gibt es eine Art, wie ich meine CSS ändern kann, so dass es im Standard-Modus funktioniert?

Ich weiß, dass, wenn ich die

Streifen aus

width="900" height="600"

, dass es das Problem löst, aber das ist keine Option, die ich habe.

Answer 1

Ich bin mir nicht sicher, ob der Ursache, aber wenn Sie fügen

width: auto;

dann funktioniert es.

Answer 2

gesetzt width:inherit für IE8

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

Answer 3

Wow, mich gerettet viel Zeit dort!

Ich hatte ein ähnliches Problem mit einem Bild in position: absolute wo Breite magisch max-width-Wert wurde unter. Sein seltsam, weil es nicht so tut, wenn das Bild nicht in der Lage. Absolute

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

funktioniert super in IE8!

Answer 4

Wow, was für ein Schmerz IE scheint immer zu sein. Obwohl es eine akzeptierte Antwort ist, fand ich, dass es nicht mein Problem lösen.

Nach reiflicher Suche fand ich, dass die Art und Weise, es zu beheben ist die Höhe und Breite Attribute aus den Bildern in Frage zu entfernen. Eine Erklärung finden Sie hier: Scaling Bilder in IE8 mit CSS max-width

Der Code ist wie folgt:

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

Jetzt neige ich dazu, jQuery, so viel wie möglich zu verwenden, das ich ein paar verschiedene Funktionen zu lösen IE8 zum Ziel und mein Leben leichter zu machen. Ich fand auch, dass die Lösung fast gearbeitet, aber nicht ganz. Ich spielte mit ihm um, bis ich in der Lage war, die Ergebnisse zu erzielen, die ich suchte. Meine Lösung ist wie folgt:

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

ich diese verwenden, um eine bestimmte Bildladefunktion zum Ziel, aber es könnte auch zu jeder Dokument bereit oder Fenster Ladefunktion hinzugefügt werden.

Answer 5

Meine Lösung für dieses Problem war:

  <!--[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 der Bilder nur funktionieren auf IE8, wenn es direkt Wrapper (div) hat eine Breite.

Beispiel:
Das Bild ist in diesem Beispiel 700px; Die Bahnbreite ist 900px;

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

Wenn Sie Stil: .wrapper1 { width: 50%; float: left; } // Diese Spaltenbreite ist 450px max;

Das Bild noch 700px und das Layout kaputt machen.

Lösung: .wrapper1 { width: 50%; float: left; } // Diese Spaltenbreite ist 450px max; .wrapper2 { width 100%; float: left; } // wenn es Grenze oder Polsterung, Breite Willen kleiner 100%

hat

Das das Bild wird die Spalte paßt (Bild = 450px), wenn Resize Fenster kleiner, Bild kleiner basierend auf wrapper2 der Breite.

Grüße, Cuong Sky