Comment redimensionner automatiquement les images en fonction de la taille du navigateur à l'aide de CSS ?

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

Vous souhaitez que vos images se redimensionnent 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.

<code class="css">img {
    max-width: 100%;
    height: auto;
    width: auto; /* ie8 */
}</code>

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 le fait pas. Ne nécessite pas JavaScript. Il est compatible avec les dernières versions de Chrome, Firefox et IE (sur la base de tests).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!