Échelle HTML IMG

Lorsqu'une image est ajoutée à un document HTML, il doit être correctement ajusté pour maintenir une meilleure représentation visuelle de l'interface. Plus précisément, HTML "IMG«La mise à l'échelle signifie ajuster l'image par rapport à différents paramètres comme«hauteur" et "largeur”Pour redimensionner l'image. Sans redimensionnement ou échelle, la taille d'origine de l'image sera affichée comme sa taille par défaut dans la sortie. Pour mettre à l'échelle les images HTML, les propriétés CSS «Hauteur» et «Largeur» sont utilisées de différentes manières.

Ce message couvrira les approches suivantes:

• Méthode 1: Mise à l'échelle d'une image en utilisant des valeurs de pourcentage
• Méthode 2: Mise à l'échelle d'une image en utilisant des valeurs de pixels

Méthode 1: Mise à l'échelle d'une image en utilisant des valeurs de pourcentage

Les développeurs peuvent appliquer le CSS "hauteur" et "largeur"Propriétés sur le HTML"”Element et définissez un nombre de pourcentages dans l'élément de style CSS pour définir la longueur horizontale et verticale de l'image en conséquence.

Exemple
Voyons un exemple de redimensionnement ou d'échelle de l'image à l'aide des propriétés CSS. Supposons que nous ayons le conteneur suivant, sur lequel les propriétés CSS doivent être appliquées:

Dans l'extrait de code HTML ci-dessus:

• UN "div«L'élément de conteneur a été ajouté avec la classe déclarée«récipient".
• À l'intérieur de la balise «div», il y a le «IMG"Tag avec le"identifiant»Déclaré comme«ma pièce d'identité" et le "SRC" attribut.
• L'adresse d'image exacte du système a été ajoutée car la valeur du «SRC" attribut. Cela ajoutera l'image sélectionnée du système dans le conteneur div dans la sortie.

Maintenant, il est nécessaire d'appliquer les propriétés CSS sur l'élément HTML ci-dessus pour mettre à l'échelle l'image ajoutée:

#ma pièce d'identité
Largeur: 50%;
hauteur: 40%;

Dans l'élément de style CSS ci-dessus:

• Le "identifiant»Déclaré dans le«IMG"L'élément est ajouté pour faire référence au"" élément.
• À l'intérieur de la div, le «largeur«La propriété est définie comme«50%". Cela ajuste la largeur de l'image sur l'écran pour couvrir la moitié de la zone horizontale de l'écran.
• Après cela, le «hauteur«La propriété a été définie sur«40%”Pour couvrir la zone« 40% »de l'ensemble de l'écran vertical dans la sortie.

Cela générera l'interface de sortie suivante:

Méthode 2: Mise à l'échelle d'une image en utilisant des valeurs de pixels

Lorsque le CSS redimensit les propriétés, je.e., "hauteur" et "largeur"Sont appliqués en définissant des valeurs pour eux dans des pixels, il redimensionne l'image dans la sortie en fonction de la valeur exacte des pixels plutôt que de régler la taille de l'image en fonction de toute la zone de l'écran.

Exemple
Appliquons le CSS "hauteur" et "largeur«Propriétés en définissant leurs valeurs dans«px»(Pixels) à exactement le même extrait HTML ajouté dans la section précédente de ce post:

#ma pièce d'identité
hauteur: 250px;
Largeur: 550px;

Dans l'extrait de code CSS ci-dessus:

• Le "hauteur«La propriété a été définie sur«250px". Cela définira la hauteur de l'image à exactement 250 pixels.
• Le "largeur«La propriété a été définie sur«550px”Pour régler la largeur à 550 pixels exactement dans la sortie.

Selon le code ci-dessus, l'image ajoutée sera mise à l'échelle comme suit:

C'est comment mettre à l'échelle une image en html.

Conclusion

Les images peuvent être mises à l'échelle ou redimensionnées dans un document HTML à l'aide du CSS "hauteur" et "largeur" propriétés. Pour les utiliser, déclarez ««identifiant"Ou un"classe"Pour le HTML"»Élément, ajoutez le sélecteur respectif dans l'élément de style CSS et définissez les propriétés de hauteur et de largeur CSS pour l'élément« ». La «hauteur» et la «largeur» peuvent être définies en ajoutant des valeurs dans le pourcentage ou les pixels. Ce blog a discuté des approches pour la mise à l'échelle d'images dans HTML.