Comment rendre les images adaptatives avec CSS ? Introduction à la méthode de taille adaptative des images CSS

Pour une page Web, il est très intéressant d'avoir une image d'arrière-plan belle et claire, mais toutes les images n'ont pas la même taille, il est donc nécessaire d'adapter l'image Xi'an. Alors, que diriez-vous du CSS Comment. sur la création d'images adaptatives ? Cet article présentera la méthode de taille adaptative des images CSS.

Regardons directement un exemple :

<div class="wrapper">
    <!--背景图片-->
    <div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
    <!--其他代码 ... --></div>

#web_bg{
  position:fixed;  
  top: 0;  
  left: 0;  
  width:100%;  
  height:100%;  
  min-width: 1000px;  
  z-index:-10;  
  zoom: 1;  
  background-color: #fff;  
  background-repeat: no-repeat;  
  background-size: cover;  
  -webkit-background-size: cover;  
  -o-background-size: cover;  
  background-position: center 0;
}

Pour l'exemple ci-dessus, analysons comment ce code CSS redimensionne l'image de manière adaptative.

Tout d'abord, jetons un œil au rôle de ces trois phrases dans la taille adaptative de l'image CSS :

  position:fixed;  
  top: 0;  
  left: 0;

Explication : Ces trois phrases font que l'ensemble du conteneur div est fixé en haut de l'écran et à l'extrême gauche.

Deuxièmement, examinons le rôle des phrases suivantes dans la taille adaptative de l'image CSS :

  width:100%;  
  height:100%;  
  min-width: 1000px;

Explication : Ces phrases font que le div entier a la même taille que l'écran, donc que Pour obtenir l'effet plein écran, min-width consiste à conserver la taille du div inchangée lorsque la largeur de l'écran est inférieure à 1000 px, ce qui signifie que dans ce cas, lors de la mise à l'échelle de la largeur de l'écran, l'image ne doit pas être mise à l'échelle (elle n'est valable que dans les 1000px ).

Jetons ensuite un coup d'œil à ce code :

  z-index:-10;

Explication : Il s'agit de placer le div entier sous chaque niveau de la page HTML. Dans des circonstances normales, le premier est créé. La valeur du z-index hiérarchique est 0, donc si nous écrivons -1 ici, cela peut également être obtenu. Cependant, écrire -10 ici garantit que l'ensemble du div est en bas, car s'il y a trop de niveaux dans la page. , parfois il n'est pas nécessaire d'utiliser -1 C'est en bas, mais cela n'a pas de sens s'il est écrit sous la forme d'un grand nombre comme -100. Indice d'utilisation : -10 De cette façon, elle peut ressembler à une image d'arrière-plan, mais il s'agit en fait du div le plus ordinaire. Seule la relation hiérarchique a changé pour la faire ressembler à une image d'arrière-plan.

  background-repeat: no-repeat;

Remarque : Ceci est l'arrière-plan, ne le répétez pas.

  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;

Explication : Les trois phrases ci-dessus ont la même signification, qui est de rendre l'image redimensionnée de manière synchrone avec la taille de l'écran, mais certaines parties peuvent être recadrées, mais elles ne seront pas exposées. les phrases sont destinées à la compatibilité des navigateurs Chrome et Opera.

Enfin, jetons un œil à la dernière phrase :

background-position: center 0;

Explication : La phrase ci-dessus signifie la position de l'image, centrée et alignée à gauche.

L'article ci-dessus se termine ici. Si vous souhaitez en savoir plus sur les différentes propriétés mentionnées dans le code CSS ci-dessus, vous pouvez vous référer au manuel CSS.

Recommandations associées :

css image adaptative size_image effets spéciaux

Comment utiliser CSS pour adapter les images à l'écran ?

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!