Maison > Article > interface Web > Comment obtenir une réduction proportionnelle égale de img en CSS3
Comment obtenir une réduction proportionnelle égale de img en CSS3
- WBOYoriginal
- 2021-12-14 18:11:3411549parcourir
En CSS, l'attribut transform peut être utilisé en conjonction avec la fonction scale() pour réaliser la réduction égale des éléments img. L'attribut transform permet de définir l'opération de mise à l'échelle de l'élément. la transformation de mise à l'échelle de l'élément. La syntaxe est "img{transform:scale (zoom ratio);}".
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment obtenir la réduction proportionnelle d'img en CSS3
En CSS, si vous souhaitez obtenir la réduction proportionnelle des éléments img, vous devez utiliser l'attribut transform et la fonction scale() pour y parvenir. L'attribut
transform applique une transformation 2D ou 3D à un élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément. La fonction
scale() est utilisée pour définir la transformation de mise à l'échelle des éléments.
fonction scale() La valeur dans la fonction est le rapport de mise à l'échelle de 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>
.img1{
transform:scale(0.5);
}
</style>
</head>
<body>
<img src="1118.02.png" class="img1" alt="Comment obtenir une réduction proportionnelle égale de img en CSS3" >
<p>上面是等比例缩小的，下面是原比例</p>
<img src="1118.02.png" alt="Comment obtenir une réduction proportionnelle égale de img en CSS3" >
</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!