Comment redimensionner automatiquement les images avec les modifications de la fenêtre du navigateur en CSS ?

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

Question : J'aimerais que mes images ajustent automatiquement leur taille lorsque je redimensionne mon navigateur fenêtre. Cependant, le code ci-dessous ne fonctionne pas :

HTML :

<code class="html"><img src="img/icon_contact.png" alt="" />
<img src="img/icon_links.png" alt="" /></code>

CSS :

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

Réponse : Pour activer le redimensionnement des images avec le redimensionnement du navigateur, ajoutez les propriétés suivantes à votre CSS :

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

Cela garantit que les images sont mises à l'échelle proportionnellement et s'ajustent automatiquement à l'espace disponible lorsque la fenêtre du navigateur est redimensionnée. .

Explication supplémentaire :

La combinaison de max-width: 100% et height: auto permet aux images de s'étendre jusqu'à leur largeur maximale sans dépasser la largeur de l'élément parent tout en en préservant leurs proportions. Le hack width: auto9 cible spécifiquement IE8, qui autrement ignore la largeur maximale lors du rendu des images.

Par conséquent, toutes les images ajoutées à l'aide de l'option La balise sera "flexible", redimensionnée en réponse aux changements de taille du navigateur.

Exemple :

Référez-vous à l'exemple JSFiddle suivant pour une démonstration fonctionnelle : [Lien JSFiddle]

Ce code ne nécessite pas JavaScript et est compatible avec les dernières versions de Chrome, Firefox et IE.

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!