Comment redimensionner automatiquement l'image pour le responsive design pur css?

J'ai essayé de redimensionner automatiquement l'image à l'aide de la propriété CSS max-width, mais il ne fonctionne pas dans IE7 et IE8. Est-il possible de redimensionner automatiquement l'image avec de la pure CSS dans IE7 et IE8?

nanba belle question.......
expression sont juste javaScript à l'intérieur d'une feuille de style, il ne fonctionnera pas si l'utilisateur met javaScript vers le bas. Ainsi, vous feriez mieux d'utiliser javaScript au lieu de garder votre propre feuille de style
oui steven, vous avez raison, je pense à l'aide de javascript est mieux au lieu d'utiliser impur css.
Le max-width propriété est en effet pris en charge par IE7 (et IE8). Difficile de dire pourquoi il ne fonctionne pas pour vous, sans voir votre code. Pour obtenir de haute qualité de mise à l'échelle dans IE7 & IE8, vous devez ajouter AlphaImageLoader avec sizingMethod="scale", mais qui ne sont pas nécessaires pour obtenir des images à l'échelle, juste pour améliorer l'apparence.
Merci beaucoup pour tout , maintenant, dans ie8 et ie7 max-largeur de travail bien pendant ce temps pour la conception répond à @media queries ne fonctionne pas sous ie7 et ie8. si vous avez une meilleure solution veuillez me suggérer.

OriginalL'auteur Viduthalai | 2011-11-18

  1. 14

    Utilisation width: inherit; à le faire fonctionner avec pur CSS dans IE8.
    (Voir sensible de la base.css.) Comme ceci:

    img {
  width: inherit;  /* This makes the next two lines work in IE8. */
  max-width: 100%; /* Add !important if needed. */
  height: auto;    /* Add !important if needed. */
}

    Je ne suis pas sûr si cela fonctionne dans IE7—merci de le tester et nous faire savoir si vous faites des tests IE7. Avant j'ai compris la width: inherit technique j'ai été en utilisant jQuery ci-dessous, de sorte que vous pouvez essayer si vous avez vraiment besoin de soutien vers le bas pour IE7 et la première technique ne fonctionne pas:

    <!--[if lt IE 9]><script>
jQuery(function($) {
    $('img').each(function(){
        //.removeAttr supports SSVs in jQuery 1.7+
        $(this).removeAttr('width height');
    });
});
</script><![endif]-->
    Vous avez sauvé ma vie. Merci!!!! Cela a fonctionné parfaitement dans internet explorer 8. Je n'ai pas essayé sous IE 7 car nous n'avons pas à le soutenir.
    Génial, oui je savais qu'il y avait un moyen que j'avais essayé un tas de choses et width:inherit est ce qui a fait le tour.

    OriginalL'auteur ryanve

  2. 2

    Essayer quelque chose comme cela:

    width: expression(document.body.clientWidth > 800 ? "800px" : "auto" );

/* If page is wider than 800px then set width to 800px, otherwise set to auto */

    Source (la peine de prendre un coup d'oeil à)

    OriginalL'auteur grc

  3. 2

    Vous avez besoin d'un temps de mise en cache d'expression pour IE 6 et 7.

    IMG {
zoom:expression(
    function(t){
        t.runtimeStyle.zoom = 1;
        var maxW = parseInt(t.currentStyle['max-width'], 10);
        var maxH = parseInt(t.currentStyle['max-height'], 10);
        if (t.scrollWidth > maxW && t.scrollWidth >= t.scrollHeight) {
            t.style.width = maxW;
        } else if (t.scrollHeight > maxH) {
            t.style.height = maxH;
        }
    }(this)
);
}

    Exemple: http://kizu.ru/lib/ie/minmax.html
    JS fichier source: http://kizu.ru/lib/ie/ie.js

    Auteur: Romain Komarov

    OriginalL'auteur Nick Sadovnikov

  4. 2

    N'est pas IE 7&8 reconnaître les suivantes:

    #my-div img
      {
         max-width:100%;
         _max-width:100%;
      }

    OriginalL'auteur Tracy

  5. 1

    La plupart des web-développeurs savent que IE a pris du retard dans la course aux normes et d'être en mesure de montrer la plus récente et la plus. De nombreuses propriétés CSS2 sont pas pris en charge. Certains des plus utiles, sont des propriétés telles que max-width, max-height, min-width et enfin min-height.
    Essayez ceci:

    <html>
<style>
p {
border:1px solid red;
width:expression( 
    document.body.clientWidth > (500/12) * 
    parseInt(document.body.currentStyle.fontSize)?
        "30em":
        "auto" );
}
</style>
<body>
<p>
[alot of text]
</p>
    Si je méprise IE et/ou MS pour des raisons différentes, l'une étant que j'ai eu à faire des dessins de travail pour IE6/7 :), je ne pense pas que IE10 "a pris du retard dans la course aux normes". Ils sont ou seront de retour.

    OriginalL'auteur kapillohakare

  6. 0

    Utilisation max-width: 100% avec height:auto, plus width:auto pour IE8:

    img 
 {
 max-width: 100%;
 height: auto;
 }

/* Media Query to filter IE8 */
@media 
    img 
{
max-width: 100%;
height: auto;
}
/* Media Query to filter IE8 */
@media \0screen 
{
img 
{ 
width: auto;
}
}
    screen 
      {
  img 
    { 
    width: auto;
    }
  }

    OriginalL'auteur Paul Sweatte

  7. 0

    Que vous aussi, vous souhaitez un soutien pour les questions de médias..Vous pouvez utiliser les éléments suivants polyfill pour ajouter le support pour les requêtes de média pour IE6-IE8

    https://github.com/scottjehl/Respond (de très petite taille, à seulement 1-2kb minifiés et gzippé)
    ensuite, utilisez le code css suivant:

    @media screen and (min-width: 480px){
    img{
     max-width: 100%;
     height: auto;
   }
}

    OriginalL'auteur Lucky Soni

  8. 0

    Je l'ai testé et de travail pour tous les navigateurs

    img{
    height: auto;
    max-width: 100%;
}

    OriginalL'auteur Ali Adravi