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!