Redimensionner automatiquement les images en fonction de la taille du navigateur à l'aide de CSS

Vous souhaitez que vos images soient redimensionnées automatiquement lorsque vous redimensionnez la fenêtre de votre navigateur, mais le code fourni ne fonctionne pas. Étudions une solution.

Pour rendre les images flexibles, vous devrez leur ajouter max-width: 100% et height: auto. Cependant, IE8 présente un bug qui empêche cela de fonctionner. Pour résoudre ce problème, ajoutez width : auto\\9 pour IE8.

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

Toutes les images ajoutées à l'aide de la balise img seront désormais automatiquement redimensionnées.

Pour illustrer, voici un exemple de JSFiddle qui ne nécessite pas de JavaScript. Il est compatible avec les dernières versions de Chrome, Firefox et IE (sur la base de tests).