web-dev-qa-db-fra.com

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

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.

internet-explorer-8csscompatibility-mode
32
Jared Henderson

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

width: auto;

alors ça marche.

73
Greg

définir width:inherit pour ie8

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

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

4
user545493

Wow, quelle douleur IE semble toujours être. Bien que la réponse soit acceptée, j’ai trouvé que cela ne réglait pas mon problème.

Après de nombreuses recherches, j'ai trouvé que la solution consiste à supprimer les attributs de hauteur et de largeur 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 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. Pour résoudre ce problème, j'ai utilisé quelques fonctions différentes pour cibler IE8 et me simplifier la vie. J'ai aussi trouvé que la solution fonctionnait presque, mais pas tout à fait. J'ai joué avec jusqu'à ce que je puisse 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
            });
        }
    });       
}

J'utilise ceci pour cibler une fonction de chargement d'image spécifique, mais cela pourrait également être ajouté à n'importe quelle fonction de préparation de document ou de chargement de fenêtre. 

2
Russell Shingleton

max-width des images fonctionne parfaitement sur IE8 lorsqu'il est directement enveloppant (div) a la 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 stylisez: .wrapper1 { width: 50%; float: left; } // la largeur de cette colonne est de 450px max;

L'image toujours 700px et rendre la mise en page cassée.

Solution: .wrapper1 { width: 50%; float: left; } // la largeur de cette colonne est 450px max; .wrapper2 { width 100%; float: left; } // si elle a une bordure ou un remplissage, la largeur sera inférieure à 100%

L'image correspondra à la colonne (image = 450px) lorsque la fenêtre sera redimensionnée plus petite, l'image sera plus petite en fonction de la largeur de wrapper2.

Cordialement,
Ciel de Cuong

0
Cuong Sky

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