Maison > Article > interface Web > Comment configurer CSS pour masquer le débordement après l'agrandissement de l'image
Comment configurer CSS pour masquer le débordement après l'agrandissement de l'image
- WBOYoriginal
- 2021-12-10 18:21:274820parcourir
Méthode : 1. Ajoutez le style "transform:scale (valeur de mise à l'échelle horizontale, valeur de mise à l'échelle verticale)" à l'élément d'image pour agrandir l'image ; 2. Utilisez l'attribut overflow pour masquer la partie débordante de l'élément d'image après l'avoir agrandi. . La syntaxe est "image L'élément parent de l'élément {overflow:hidden;}".
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment définir le CSS pour masquer le débordement après l'agrandissement de l'image
En CSS, vous pouvez utiliser l'attribut transform pour agrandir l'image Lorsque cet attribut est utilisé en conjonction avec la fonction d'échelle, l'élément. peut être mis à l'échelle.La syntaxe est la suivante :
图片元素{transform:scale(横向缩放值,竖向缩放值);} Masquez ensuite la partie en excès via l'attribut overflow, qui est utilisé pour définir le style de l'élément en excès. Lorsque la valeur de l'attribut est masquée, l'élément en excès sera masqué.
La syntaxe est la suivante :
元素{overflow:hidden;}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>
div{
width:500px;
height:300px;
border:1px solid #000;
overflow:hidden;
}
img{
transform:scale(1.5,1.5);
}
</style>
</head>
<body>
<div><img src="1118.02.png" alt=""></div>
</body>
</html>Résultat de sortie :
(Partage vidéo 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!