IE8 mode non-compatibilité, image avec max-largeur et hauteur: auto

Question

J'ai une image avec ce balisage

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

J'utilise CSS pour réduire les effectifs à 600px de largeur, comme suit:

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

Quelqu'un peut-il expliquer pourquoi cette méthode fonctionne en mode de compatibilité, mais pas en mode standard? Est-il possible que je peux modifier mon CSS afin qu'il fonctionne en mode standard?

je sais que si je bande sur le

width="900" height="600"

qu'il résout le problème, mais ce n'est pas une option que j'ai.

Answer 1

Je ne suis pas sûr de la cause racine, mais si vous ajoutez

width: auto;

il fonctionne.

Answer 2

ensemble width:inherit pour IE8

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

Answer 3

Wow, m'a sauvé beaucoup de temps là-bas!

i eu un problème similaire avec une image en position: absolute où la largeur prenait magique valeur maximum de largeur. Son étrange parce qu'il ne fait pas que lorsque l'image n'a pas été en position. Absolue

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

fonctionne très bien dans IE8!

Answer 4

Wow, quelle douleur IE semble toujours être. Bien qu'il y ait une réponse acceptée, je trouve qu'il n'a pas résolu mon problème.

Après la recherche que je trouve que la façon de le fixer est d'enlever la hauteur et la largeur des attributs des images en question. Une explication peut être trouvée ici: Mise à l'échelle des images dans IE8 avec CSS max-width

Le code est le suivant:

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

Maintenant, je tendance à utiliser jQuery autant que possible, pour résoudre ce que j'ai utilisé quelques fonctions différentes pour cibler IE8 et rendre ma vie plus facile. J'ai aussi trouvé que la solution a presque fonctionné, mais pas tout à fait. Je jouai avec elle jusqu'à ce que j'ai pu obtenir les résultats que je recherchais. Ma solution est la suivante:

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

J'utilise ceci pour cibler une fonction de charge d'image spécifique, mais il pourrait être ajouté à une fonction de document prêt ou la charge de la fenêtre ainsi.

Answer 5

Ma solution à ce problème est:

  <!--[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 d'images fonctionne très bien sur IE8 quand il est directement emballage (div) a une largeur.

Exemple:
L'image dans cet exemple est 700px; La largeur de la bande est 900px;

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

si vous style: .wrapper1 { width: 50%; float: left; } // largeur de cette colonne est 450px max;

L'image fixe 700px et faire la mise en page brisée.

Solution: .wrapper1 { width: 50%; float: left; } // la largeur de cette colonne est 450px max; .wrapper2 { width 100%; float: left; } // si elle a frontière ou de rembourrage, volonté largeur inférieure à 100%

l'image conviendra à la colonne (image = 450px) lorsque la fenêtre de redimensionnement plus petit, plus petit sera l'image sur la base de la largeur de wrapper2.

Cordialement,
Cuong Sky