Maison > Article > interface Web > Comment agrandir div en CSS3
Comment agrandir div en CSS3
- WBOYoriginal
- 2021-12-15 14:35:567400parcourir
Méthode : 1. Utilisez l'attribut transform et la fonction scale() pour agrandir le div. La syntaxe est "element {transform:scale (magnification)}" ; 2. Utilisez les attributs width et height pour obtenir l'effet d'agrandissement du div. div. La syntaxe est "élément {largeur : largeur ; hauteur : hauteur} ».
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment agrandir un div en CSS3
En CSS, si vous souhaitez agrandir un div, vous pouvez utiliser l'attribut transform et les attributs width et height pour y parvenir.
1. Utilisez l'attribut transform avec la fonction scale() pour obtenir l'effet div d'agrandissement
L'attribut transform applique une transformation 2D ou 3D à l'élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément.
L'exemple est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0 auto;
}
.div1{
width:150px;
height:100px;
background:pink;
transform:scale(1.5);
}
.div2{
width:150px;
height:100px;
background:pink;
}
</style>
</head>
<body>
<div class="div1"></div>
<br><br>
<div class="div2"></div>
</body>
</html>Résultat de sortie :
2. Utilisez les attributs width et height pour obtenir l'effet d'agrandissement du div.
L'exemple est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1{
width:300px;
height:200px;
background:pink;
}
.div2{
width:150px;
height:100px;
background:pink;
}
</style>
</head>
<body>
<div class="div1"></div>
<br><br>
<div class="div2"></div>
</body>
</html>Résultat de sortie :
(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)
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!