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:02407parcourir
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!