Maison > Article > interface Web > Comment redimensionner automatiquement les images avec la fenêtre du navigateur à l'aide de CSS ?

Comment redimensionner automatiquement les images avec la fenêtre du navigateur à l'aide de CSS ?

Linda Hamiltonoriginal: 2024-10-26 04:09:02318parcourir

How to Make Images Automatically Resize with Browser Window Using CSS?

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

Problème :

Vos images ne s'affichent pas automatiquement redimensionner lorsque vous redimensionnez la fenêtre de votre navigateur. Vous avez essayé le code suivant mais il ne fonctionne pas :

HTML :

<code class="html"><!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    </head>
    <body>
        <div id="icons">
            <div id="contact">
                <img src="img/icon_contact.png" alt="" />
            </div>
            <img src="img/icon_links.png" alt="" />
        </div>
    </body>
</html></code>

CSS :

<code class="css">body {
    font-family: Arial;
    font-size: 11px;
    color: #ffffff;
    background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
    background-size: cover;
}

#icons {
    position: absolute;
    bottom: 22%;
    right: 8%;
    width: 400px;
    height: 80px;
    z-index: 8;
    transform: rotate(-57deg); 
    -ms-transform: rotate(-57deg); 
    -webkit-transform: rotate(-57deg); 
    -moz-transform: rotate(-57deg);
}

#contact { 
    float: left; 
    cursor: pointer; 
}


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

Solution :

Pour rendre vos images flexibles, ajoutez les propriétés CSS suivantes :

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

En définissant max-width à 100 %, l'image ne dépassera jamais la largeur de son conteneur. Le réglage de la hauteur sur auto permet à l’image de conserver son rapport hauteur/largeur lors du redimensionnement. Le remplacement width: auto9 est nécessaire pour la compatibilité avec IE8.

Une fois ces propriétés en place, toutes les images que vous ajoutez à l'aide de la balise img seront automatiquement redimensionnées pour s'adapter à la taille de la fenêtre de votre navigateur.

Démo JSFiddle :

Vous pouvez voir une démonstration en direct de cette solution dans ce JSFiddle :

https://jsfiddle.net/mjc5ue0z/

Aucun JavaScript n'est requis pour cette solution. Il fonctionne dans les dernières versions de Chrome, Firefox et IE (versions testées).

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!

JavaScript firefox css chrome html for while auto using this https

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：## Les tableaux peuvent-ils résoudre le problème de la répétition des en-têtes et des pieds de page sur les pages imprimées ?Article suivant：## Les tableaux peuvent-ils résoudre le problème de la répétition des en-têtes et des pieds de page sur les pages imprimées ?

Articles Liés

Voir plus