Comment puis-je redimensionner une image dynamiquement avec CSS lorsque la largeur / hauteur du navigateur change?

Je me demande comment je pourrais redimensionner une image avec la fenêtre du navigateur, voici ce que j'ai fait jusqu'à présent (ou télécharger l'ensemble du site dans un ZIP ).

Cela fonctionne bien dans Firefox, mais cela a des problèmes dans Chrome: l'image ne se redimensionne pas toujours, cela dépend en quelque sorte de la taille de la fenêtre lorsque la page a été chargée.

Cela fonctionne également correctement dans Safari, mais parfois l'image est chargée avec sa largeur / hauteur minimale. Peut-être que cela est dû à la taille de l'image, je ne suis pas sûr. (Si le chargement est correct, essayez d'actualiser plusieurs fois pour voir le bogue.)

Des idées sur la façon de rendre cela plus résistant aux balles? (Si JavaScript est nécessaire, je peux aussi vivre avec cela, mais CSS est préférable.)

Cela peut être fait avec du CSS pur et ne nécessite même pas de requêtes multimédias.

Pour rendre les images flexibles, ajoutez simplement max-width:100%et height:auto. Image max-width:100%et height:autofonctionne dans IE7, mais pas dans IE8 (oui, un autre bogue IE bizarre). Pour résoudre ce problème, vous devez ajouter width:auto\9pour IE8.

source: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

CSS:

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

Et si vous souhaitez appliquer une largeur maximale fixe de l'image, placez-la simplement dans un conteneur, par exemple:

<div style="max-width:500px;">
    <img src="..." />
</div>

Exemple JSFiddle ici . Aucun JavaScript requis. Fonctionne dans les dernières versions de Chrome, Firefox et IE (c'est tout ce que j'ai testé).

Solution 2018 et ultérieure:

L'utilisation d'unités relatives à la fenêtre devrait vous faciliter la vie, étant donné que nous avons l'image d'un chat:

Maintenant, nous voulons ce chat dans notre code, tout en respectant les proportions:

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

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Jusqu'à présent, ce n'est pas vraiment intéressant, mais que se passe-t-il si nous voulons changer la largeur des chats pour qu'elle soit au maximum de 50% de la fenêtre?

img {
  width: 100%;
  height: auto;
  /* Magic! */
  max-width: 50vw;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

La même image, mais maintenant limitée à une largeur maximale de 50vw vw (= largeur de la fenêtre) signifie que l'image aura une largeur X de la fenêtre, en fonction du chiffre fourni. Cela fonctionne également pour la hauteur:

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

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Cela limite la hauteur de l'image à un maximum de 20% de la fenêtre.

window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

Dans IE onresize événement est déclenché à chaque changement de pixel (largeur ou hauteur), il peut donc y avoir un problème de performances. Retardez le redimensionnement de l'image de quelques millisecondes en utilisant window.setTimeout () de javascript.

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

Définissez la propriété resize sur les deux. Ensuite, vous pouvez changer la largeur et la hauteur comme ceci:

.classname img{
  resize: both;
  width:50px;
  height:25px;
}

Utilisez-vous jQuery?

Parce que j'ai fait une recherche rapide sur les plugins jQuery et qu'ils semblent avoir un plugin pour le faire, vérifiez celui-ci, devrait fonctionner:

http://plugins.jquery.com/project/jquery-afterresize

ÉDITER:

C'est la solution CSS, j'ajoute juste un style = "width: 100%" , et fonctionne pour moi au moins dans Chrome et Safari. Je n'ai pas de ie, alors faites un test là-bas, et faites-moi savoir, voici le code:

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>

Au départ, j'utilisais le html / css suivant:

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

<div> 
  <img src="..." />
</div>

Ensuite, j'ai ajouté class="img"à <div> ceci:

<div class="img">
  <img src="..." />
</div>

Et tout a commencé à bien fonctionner.

Vous pouvez utiliser la scalepropriété CSS3 pour redimensionner l'image avec css:

.image:hover {
  -webkit-transform:scale(1.2); 
          transform:scale(1.2);
}
.image {
  -webkit-transition: all 0.7s ease; 
          transition: all 0.7s ease;
}

Lectures complémentaires :

• Transformations CSS3 2D
• Transitions, transformations, animations d'effet de survol CSS3

Utilisez simplement ce code. Ce que la plupart oublient, c'est de spécifier la largeur maximale comme largeur maximale de l'image

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

Vérifiez cette démonstration http://shorturl.at/nBKVY

Essayer

.img{
   width:100vw; /* Matches to the Viewport Width */
   height:auto;
   max-width:100% !important;
}

Ne fonctionne qu'avec le bloc d'affichage et le bloc en ligne, cela n'a aucun effet sur les éléments flexibles car je viens de passer des siècles à essayer de le savoir.