Taille d'image HTML | Expliqué

Taille d'image HTML | Expliqué

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 que votre image ne correspond pas à la disposition de votre page Web, vous pouvez le redimensionner. À cette fin, vous pouvez utiliser le «largeur" et "hauteur«Propriétés sur le«IMG" étiqueter. Ces valeurs de propriété peuvent être facilement définies dans les 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 dans HTML?

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


La description de la syntaxe mentionnée ci-dessus est décrite ci-dessous. Le "IMG»Tag utilise deux attributs:

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

Html

Le code ci-dessous représente deux div. Dans le premier div, nous avons ajouté une rubrique dans le centre supérieur de notre page Web comme «Taille de l'image en HTML"En utilisant le

étiqueter:



Taille de l'image en HTML




Le deuxième div est ajouté 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:






L'image sélectionnée avec «640 * 437"Le rapport d'aspect ressemblera à ceci:


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

Comment redimensionner l'image en html?

Vous pouvez personnaliser la taille de l'image ou le redimensionner en utilisant «largeur" et "hauteur»Attributs pour régler sa largeur et sa hauteur.

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


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 «hauteur»L'attribut peut également être utilisé dans le même but. Pour afficher la différence de taille, réglez "550”Pixels comme hauteur d'image:


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


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

Conclusion

Dans HTML, le «hauteur" et "largeur»Les attributs sont utilisés pour redimensionner l'image. Vous pouvez modifier le rapport d'aspect par défaut de l'image ajoutée en définissant les valeurs de ces attributs. En conséquence, une différence claire 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 taille et de poids pour redimensionner les images en HTML.