webentwicklung-frage-antwort-db.com.de

IE8-Nichtkompatibilitätsmodus, Bild mit maximaler Breite und Höhe: auto

Ich habe ein Bild mit diesem Markup

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

Und ich verwende CSS, um es auf 600px Breite zu verkleinern.

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

Kann jemand erklären, warum diese Methode im Kompatibilitätsmodus funktioniert, aber nicht im Standardmodus? Gibt es eine Möglichkeit, mein CSS so zu ändern, dass es im Standardmodus funktioniert?

Ich merke das, wenn ich die entkleide 

width="900" height="600"

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

32
Jared Henderson

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

width: auto;

dann klappt es.

73
Greg

setze width:inherit für ie8

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

Wow, ich habe dort viel Zeit gespart! 

ich hatte ein ähnliches Problem mit einem Bild in Position: absolut, wo die Breite magisch den Maximalwert angenommen hat. Es ist seltsam, weil es das nicht tut, wenn das Bild nicht in Position ist: absolut.

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

funktioniert super im IE8!

4
user545493

Wow, was für ein Schmerz IE immer zu sein scheint. Obwohl es eine akzeptierte Antwort gibt, habe ich festgestellt, dass es mein Problem nicht gelöst hat.

Nach langer Suche fand ich heraus, dass der Weg zur Behebung darin besteht, die Höhen- und Breitenattribute aus den fraglichen Bildern zu entfernen. Eine Erklärung finden Sie hier: Skalieren von Bildern im IE8 mit CSS max-width

Der Code lautet wie folgt:

CSS:

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

SKRIPT

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 oft wie möglich zu verwenden. Um dieses Problem zu lösen, habe ich ein paar verschiedene Funktionen verwendet, um auf IE8 zu zielen und mein Leben zu erleichtern. Ich fand auch, dass die Lösung fast funktionierte, aber nicht ganz. Ich spielte damit herum, bis ich die gewünschten Ergebnisse erzielen konnte. Meine Lösung lautet 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 verwende dies, um auf eine bestimmte Bildladefunktion zu zielen, es könnte aber auch zu jeder Dokumentbereitschafts- oder Fensterladefunktion hinzugefügt werden. 

2

die maximale Breite der Bilder funktioniert auf IE8 problemlos, wenn der Wrapper (div) die Breite hat.

Beispiel:
Das Bild in diesem Beispiel ist 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 den Stil definieren: .wrapper1 { width: 50%; float: left; } // Diese Spaltenbreite beträgt maximal 450px.

Das Bild noch 700px und das Layout kaputt machen.

Lösung: .wrapper1 { width: 50%; float: left; } // die Breite dieser Spalte beträgt maximal 450px; .wrapper2 { width 100%; float: left; } // Wenn sie einen Rand oder eine Auffüllung hat, wird die Breite um 100% geringer.

Das Bild passt in die Spalte (Bild = 450px), wenn das Fenster verkleinert und das Bild verkleinert wird, je nach Breite des Wrappers2.

Grüße,
Cuong Sky

0
Cuong Sky

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