Comment définir la taille de l'image d'img en utilisant CSS-tutoriel CSS-php.cn

Comment définir la taille de l'image d'img en utilisant CSS

WBOY

Libérer： 2021-11-29 15:40:35

original

22324 Les gens l'ont consulté

En CSS, vous pouvez utiliser les attributs width et height pour définir la taille de l'image de l'élément img. L'attribut width est utilisé pour définir la valeur de largeur de l'élément. L'attribut height est utilisé pour définir la valeur de hauteur de l'élément. . La syntaxe est "élément img {largeur : valeur de largeur ; hauteur : valeur de hauteur ;}".

Comment définir la taille de l'image d'img en utilisant CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Comment définir la taille de l'image d'img en utilisant CSS

En CSS, vous pouvez utiliser les attributs width et height pour définir la taille de l'image d'img 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>123</title>
    <style type="text/css">
    .tupian{
        width:150px;
        height:150px;
    }
</style>
  </head>
  <body>
<img  src="1115.08.png" class="tupian" alt="Comment définir la taille de l'image d'img en utilisant CSS" >
<p>上面是设置了大小，下面没设置大小</p>
<img  src="1115.08.png" alt="Comment définir la taille de l'image d'img en utilisant CSS" >
  </body>
</html>

Copier après la connexion

Résultat de sortie :

Comment définir la taille de limage dimg en utilisant CSS

Dans l'exemple ci-dessus, les attributs de largeur et de hauteur sont définis en même temps. Si vous souhaitez obtenir une mise à l'échelle égale, il vous suffit de définir un seul attribut. L'exemple est le suivant :

Lorsque seul le style width:150px; est ajouté, le résultat de sortie est :

Comment définir la taille de limage dimg en utilisant CSS