Maison >interface Web >tutoriel CSS >Comment obtenir la même mise à l'échelle des images sur la page en utilisant CSS ? (exemple)
Comment obtenir la même mise à l'échelle des images sur la page en utilisant CSS ? (exemple)
- 藏色散人original
- 2018-08-13 17:11:086582parcourir
Lorsque nous parcourons la page ou dans le travail réel, nous rencontrons parfois des problèmes de mise à l'échelle de l'image. Cet article vous présentera donc la question de la mise à l'échelle égale des images CSS, c'est-à-dire de l'affichage des images CSS dans des proportions égales. J'espère que cela aidera les amis dans le besoin.
L'exemple de code spécifique pour afficher des images CSS dans des proportions égales est le suivant :
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>css图片等比例显示代码示例</title>
<meta charset="UTF-8">
<style type="text/css">
.demo1-1 {
float: left;
width: 200px;
height: 200px;
overflow: hidden;
}
.zoomImage {
width: 100%;
height: 0;
padding-top: 100%;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
}
</style>
</head>
<body>
<div class="demo1-1">
<div class="zoomImage" style="background-image: url(2.png)"></div>
</div>
</body>
</html>L'effet est le suivant :
Remarque : L'attribut background-size spécifie la taille de l'image d'arrière-plan.
Valeurs possibles :
1. longueur
Définissez la hauteur et la largeur de l'image d'arrière-plan. La première valeur définit la largeur et la deuxième valeur définit la hauteur. Si une seule valeur est définie, la deuxième valeur sera définie sur « auto ».
2. Pourcentage
Définissez la largeur et la hauteur de l'image d'arrière-plan en pourcentage de l'élément parent. La première valeur définit la largeur et la deuxième valeur définit la hauteur. Si une seule valeur est définie, la deuxième valeur sera définie sur « auto ».
3. couverture
Agrandissez l'image d'arrière-plan à une taille suffisamment grande pour que l'image d'arrière-plan recouvre complètement la zone d'arrière-plan. Certaines parties de l'image d'arrière-plan peuvent ne pas être affichées dans la zone d'ancrage d'arrière-plan.
4. contenir
Agrandissez l'image à sa taille maximale afin que sa largeur et sa hauteur s'intègrent parfaitement dans la zone de contenu.
Ce qui précède est l'introduction spécifique à l'affichage à échelle proportionnelle des images CSS. Il a une certaine valeur de référence et peut être utilisé comme référence.
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!