En HTML, nous pouvons modifier la taille de n’importe quelle image des différentes manières suivantes :
- Utilisation de la balise HTML
- Utiliser un attribut de style Inline
- Utiliser du CSS interne
Utilisation de la balise HTML
Remarque : HTML 5 ne prend pas en charge les attributs height et width de ![]()
, nous devons donc utiliser l'attribut de style en ligne et les options CSS internes pour modifier l'image ou la taille de l'image.
Si nous voulons changer la taille d'une image dans le document en utilisant Balise HTML qui doit être affiché sur une page Web, nous devons suivre les étapes indiquées ci-dessous. En suivant ces étapes, nous pouvons facilement modifier la taille de l’image :
Étape 1: Tout d'abord, nous devons saisir le code HTML dans n'importe quel éditeur de texte ou ouvrir le fichier HTML existant dans l'éditeur de texte dans lequel nous souhaitons modifier la taille d'une image.
Chnage the Size of an image Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Étape 2: Maintenant, placez le curseur à l’intérieur de la balise img. Et puis, nous devons utiliser les attributs height et width de la balise img pour modifier la taille d'une image. Nous devons donc saisir ces attributs :
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp">
Étape 3: Et enfin, nous devons enregistrer le fichier HTML puis l’exécuter.
Chnage the Size of an image Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>Testez-le maintenant
La sortie du code HTML ci-dessus est affichée dans la capture d'écran suivante :
Utilisation d'un attribut de style en ligne
Si nous souhaitons modifier la taille d'une image à l'aide d'un attribut de style en ligne qui doit être affiché sur une page Web, nous devons suivre les étapes indiquées ci-dessous. En suivant ces étapes, nous pouvons facilement modifier la taille de l’image.
Étape 1: Tout d'abord, nous devons saisir le code HTML dans n'importe quel éditeur de texte ou ouvrir le fichier HTML existant dans l'éditeur de texte dans lequel nous souhaitons utiliser l'attribut style pour modifier la taille d'une image.
Change the Size of an image using inline style attribute Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Étape 2: Maintenant, placez le curseur à l'intérieur du balise img de cette image dont nous voulons changer la taille. Et puis, il faut taper l’attribut style juste après l’attribut src . Et puis, nous devons saisir les propriétés width et height dans l’attribut style comme indiqué dans le bloc suivant :
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Étape 3: Et enfin, nous devons enregistrer le fichier HTML puis l'exécuter.
Change the Size of an image using inline style attribute Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>Testez-le maintenant
La sortie du code HTML ci-dessus est affichée dans la capture d'écran suivante :
Utilisation du CSS interne
Si nous souhaitons modifier la taille d'une image ou d'une image à l'aide d'une feuille de style en cascade interne qui doit être affichée sur une page Web, nous devons suivre les étapes indiquées ci-dessous. En suivant ces étapes, nous pouvons facilement modifier la taille de n’importe quelle image.
Étape 1: Tout d'abord, nous devons saisir le code HTML dans n'importe quel éditeur de texte ou ouvrir le fichier HTML existant dans l'éditeur de texte dans lequel nous souhaitons utiliser le CSS interne pour modifier la taille d'une image.
Change the Size of an image using internal CSS Hello User! <br> This is <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Étape 2: Maintenant, il faut placer le curseur dans la balise head du document Html puis définir les styles à l'intérieur de la balise head. balise comme indiqué dans le bloc suivant. Et puis tapez le largeur et hauteur attribut dans le sélecteur d'identifiant.
#imagesize { width:100px; height:100px; } Étape 3: Maintenant, nous devons taper l'identifiant dans la balise img de cette image dont nous voulons modifier la taille :
Change the Size of an image using internal CSS #imagesize { width:200px; height:200px; } Hello User! <br> This is <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp" id="imagesize"> <br> Testez-le maintenant Étape 5 : Maintenant, nous devons enregistrer le fichier HTML, puis exécuter le fichier. La capture d'écran suivante montre la sortie du code HTML ci-dessus :
