HTML Ajuster la taille de l'image
Qu'entendons-nous en ajustant la taille de l'image en html?
La taille d'une image est une combinaison de sa hauteur et de sa largeur. Par exemple, si nous avons une image de taille 100 x 100, cela signifiera que ladite image aura une hauteur et une largeur de 100 pixels. En ajustant la taille d'une image en HTML, nous signifions littéralement changer la hauteur et la largeur de cette image en fonction de nos exigences. De plus, il n'est pas non plus obligatoire pour une image d'avoir la même largeur et la même hauteur. En d'autres termes, il est parfaitement normal qu'une image ait une hauteur et une largeur différentes. Maintenant, apprenons les méthodes d'ajustement de la taille d'une image dans HTML.
Comment ajuster la taille de l'image en HTML?
Vous pouvez facilement ajuster la taille de l'une de vos images souhaitées en HTML en suivant l'une des deux méthodes expliquées ci-dessous. Cependant, avant d'aller de l'avant avec ces méthodes, nous aimerions vous montrer l'image dont nous souhaitons ajuster la taille en utilisant ces méthodes. Cette image est la suivante:
La taille d'origine de cette image est de 900 x 900, i.e., La hauteur, ainsi que la largeur de cette image, sont de 900 pixels, comme en évidence dans l'image ci-dessous:
Méthode n ° 1: en utilisant les propriétés simples de hauteur et de largeur de HTML
Dans cette méthode, nous utiliserons les propriétés simples de hauteur et de largeur de HTML pour ajuster la taille de notre image spécifiée. Vous pouvez attribuer n'importe quelle valeur de votre choix à ces propriétés. Le script HTML pour cette méthode est le suivant:
Dans cette méthode, notre objectif principal est d'ajuster la taille de l'image, pour laquelle nous avons utilisé l'attribut «IMG» de HTML. Cet attribut est utilisé chaque fois que vous souhaitez jouer avec des images en HTML. Ensuite, nous avons utilisé l'attribut «SRC», avec l'aide de laquelle nous nous référons au chemin ou à l'emplacement exact où réside notre image cible. Vous pouvez voir qu'après cet attribut, nous avons mentionné le chemin complet de notre image souhaitée. Ensuite, nous avons l'attribut «Alt», qui est là pour mentionner un texte alternatif pour décrire l'image. Vous êtes totalement autorisé à ignorer cet attribut. Ceci est suivi des propriétés «largeur» et «hauteur» de HTML. Nous avons gardé les valeurs de ces deux propriétés comme «400». Cela signifie que ce script affichera notre image cible dans une taille réduite lors de l'exécution.
La page Web illustrée dans l'image ci-dessous affiche notre image en taille 400 x 400.
Méthode n ° 2: en utilisant l'attribut de style de HTML
Ceci n'est qu'une autre méthode pour ajuster la taille d'une image dans HTML. Il utilise l'attribut de style en ligne de HTML. Pour utiliser cette méthode, vous devrez jeter un œil au script HTML suivant:
Ce script HTML est à peu près similaire à celui dont nous avons discuté ci-dessus dans notre première méthode. Cependant, cette fois, au lieu de simplement spécifier les valeurs des propriétés HTML «hauteur» et «largeur», nous avons utilisé l'attribut «style», puis nous avons joint ces propriétés à l'intérieur. Cette fois, nous voulons changer la taille de notre image cible à 600 x 600.
Notre image spécifiée avec la taille nouvellement ajustée est affichée dans l'image ci-dessous:
Conclusion
Ce tutoriel a été conçu pour vous guider concernant les méthodes d'ajustement de la taille de l'image en HTML. À cet égard, nous avons partagé deux méthodes différentes avec vous qui sont vraiment faciles à mettre en œuvre. Après avoir parcouru ces deux méthodes, vous n'aurez pas de mal à ajuster les tailles de vos images, je.e., Augmentez ou diminuez la taille de l'image en fonction de vos exigences tout en travaillant avec HTML.