Mode non compatible IE8, image avec largeur maximale et hauteur: auto

Question

J'ai une image avec ce balisage

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

Et j'utilise CSS pour le réduire à une largeur de 600 pixels, comme ceci:

 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 de modifier mon CSS pour qu'il fonctionne en mode standard?

Je me rends compte que si je dépouille le

 width="900" height="600"
 

que cela 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, mais si vous ajoutez

 width: auto;
 

alors ça marche.

Answer 2

définir 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!

J'ai eu un problème similaire avec une image en position: absolue où la largeur prenait comme par magie la valeur max-width. C'est bizarre parce que ça ne fait pas ça quand l'image n'était pas en position: absolue.

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

fonctionne très bien dans IE8!

Answer 4

Wow, quelle douleur c'est à dire toujours semble être. Bien qu'il y est accepté comme réponse, j'ai trouvé qu'il n'a pas résolu mon problème.

Après beaucoup de recherche j'ai trouvé que le moyen pour résoudre ce problème est de supprimer les attributs height et width de l'image en question. Une explication peut être trouvée ici: mise à l'Échelle des Images dans IE8 avec CSS max-width

Le code est comme suit:

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, j'ai tendance à utiliser jQuery autant que possible, de résoudre cela, j'ai utilisé quelques fonctions différentes pour cible IE8 et me rendre la vie plus facile. J'ai aussi trouvé que la solution a presque fonctionné, mais pas tout à fait. J'ai joué avec elle jusqu'à ce que j'ai pu atteindre les résultats que je cherchais. 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
            });
        }
    });       
}

Je l'utilise pour cible une image spécifique de la fonction de charge, mais il peut être ajouté à tout document prêt ou de la fenêtre de la fonction de charge ainsi.

Answer 5

Ma solution à ce problème était la suivante:

   <!--[if IE 8]>
  <style>
   a.link img{
          max-height:500px ;
          width:auto !important;
          max-width:400px;
          height:auto !important;
          width:1px; 

        }
  </style>
  <![endif]-->