HTML nous permet d'utiliser des images dans des pages Web et de les rendre plus attrayantes en appliquant différents styles. Si vous devez modifier le rapport d'aspect de l'image ou si votre image ne correspond pas à la mise en page de votre page Web, vous pouvez la redimensionner. A cet effet, vous pouvez utiliser le « largeur ' et ' la taille « propriétés sur le » image ' étiquette. Ces valeurs de propriété peuvent être facilement définies en pixels CSS.

Dans ce manuel, vous apprendrez la méthode pour redimensionner l'image en HTML.

Avant de commencer, il est nécessaire d'ajouter l'image au fichier HTML sur lequel l'opération de redimensionnement de l'image sera effectuée.

Comment intégrer une image en HTML ?

Pour ajouter une image en HTML, utilisez la syntaxe suivante :

La description de la syntaxe mentionnée ci-dessus est décrite ci-dessous. La ' image ” utilise deux attributs :

• • « src » est utilisé pour fournir le chemin (URL) de l'image.
  • 'tout' est utilisé pour fournir le texte alternatif si l'image n'est pas affichée.

HTML

Le code ci-dessous représente deux divs. Dans la première div, nous avons ajouté un titre en haut au centre de notre page Web comme ' Taille de l'image en HTML ” en utilisant la balise

 :

< div >
< centre >
< h1 > Taille de l'image dans HTML h1 >
centre >
div >

La deuxième div est ajoutée avec la classe nommée ' récipient ” et pour représenter l'image au centre, nous avons utilisé la balise

. À l'intérieur du centre, écrivez le code mentionné ci-dessous pour ajouter une image :

< div classer = 'récipient' >
< centre >
< image src = 'images/papillon.jpg' tout = 'texte alternatif' >
centre >
div >

L'image sélectionnée avec ' 640*437 ” le rapport d'aspect ressemblera à ceci:

La section suivante montrera la méthode pour redimensionner une image.

Comment redimensionner l'image en HTML ?

Vous pouvez personnaliser la taille de l'image ou la redimensionner en utilisant ' largeur ' et ' la taille ” pour définir sa largeur et sa hauteur.

Maintenant, définissons la valeur de largeur de l'image ajoutée comme ' 300 ” et voyez comment cela fonctionne :

< image src = 'images/papillon.jpg' tout = 'texte alternatif' largeur = '300' >

On peut voir que la largeur de l'image a été modifiée et qu'elle est redimensionnée avec succès :

En plus de la largeur, le ' la taille ” L'attribut peut également être utilisé dans le même but. Pour voir la différence de taille, réglez ' 550 ” pixels comme hauteur d'image :

< image src = 'images/papillon.jpg' tout = 'texte alternatif' largeur = '300' la taille = '550' >

Vous pouvez clairement observer la différence dans la taille de l'image :

C'est ainsi que les attributs de largeur et de hauteur sont utilisés pour redimensionner l'image.

Conclusion

En HTML, le ' la taille ' et ' largeur ” Les attributs sont utilisés pour redimensionner l'image. Vous pouvez modifier le format d'image par défaut de l'image ajoutée en définissant les valeurs de ces attributs. En conséquence, une nette différence peut être observée en ce qui concerne la taille de l'image. Ce blog a démontré la méthode pour utiliser les propriétés de hauteur et de poids pour redimensionner les images en HTML.