Attribut height de l'image <img> HTML

Balise HTML <img>

Définition et utilisation

hauteur cette propriété détermine la hauteur de l'image en pixels.

Astuce :Il faut toujours spécifier pour l'image hauteur et propriété largeurSi la hauteur et la largeur sont définies, l'espace nécessaire pour l'image sera réservé au chargement de la page. Sinon, si ces attributs ne sont pas présents, le navigateur ne sait pas la taille de l'image et ne peut pas réserver l'espace approprié. Cela peut entraîner des changements dans la mise en page de la page pendant le chargement (lorsque l'image est chargée).

Astuce :utiliser hauteur et largeur Réduire la taille d'une image large rend obligatoire le téléchargement de l'image large par l'utilisateur (même si elle semble petite sur la page). Pour éviter cela, ajustez la taille de l'image avec un logiciel de traitement d'image avant de l'utiliser sur la page.

Lecture recommandée :Explication détaillée des attributs height et width

Exemple

Une image de 600 pixels de hauteur et 500 pixels de largeur :

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Essayez-le vous-même

Syntaxe

<img height="pixels">

Valeur de l'attribut

Valeur Description
pixels Définir la hauteur de l'image en pixels (par exemple height="100").

Plus d'exemples

Changer la taille de l'image - Créer une image de remplissage

Les propriétés height et width ont une caractéristique cachée : il n'est pas nécessaire de spécifier la taille réelle de l'image, c'est-à-dire que ces valeurs peuvent être plus grandes ou plus petites que la taille réelle. Le navigateur ajustera automatiquement l'image pour qu'elle s'adapte à la taille prévue. Avec cette méthode, il est facile de créer des miniatures pour des images grandes ou d'agrandir des images très petites. Mais attention : le navigateur doit tout de même télécharger le fichier entier, peu importe la taille finale affichée, et si le rapport largeur/hauteur d'origine n'est pas maintenu, l'image sera déformée.

Une autre astuce pour utiliser les propriétés height et width consiste à remplir facilement une zone de page tout en améliorant les performances du document. Imaginez que vous voulez placer une barre colorée dans le document. Vous n'avez pas besoin de créer une image de taille complète, au lieu de cela, créez une image de 1 pixel de largeur et de hauteur, et assignez-lui la couleur que vous souhaitez utiliser. Ensuite, utilisez les propriétés height et width pour l'étendre à une taille plus grande.

<img src="/i/ct_1px.gif"} width="200px" height="30px" />

Voici l'effet de ce morceau de HTML ci-dessus, cette barre de couleur est faite avec une image d'un seul pixel :

Utilisation de pourcentages

La dernière astuce pour utiliser la propriété width est d'utiliser des pourcentages au lieu de valeurs absolues en pixels. Cela permettra au navigateur de redimensionner l'image en fonction d'un certain pourcentage de la fenêtre de visualisation. Par conséquent, pour créer une barre horizontale colorée de la même largeur que la fenêtre de visualisation et d'une hauteur de 30 pixels, vous pouvez le faire ainsi :

<img src="/i/ct_1px.gif"} width="60%" height="30px" />

Quand la taille de la fenêtre du document change, la taille de cette image change également :

Astuce :Si une valeur de largeur sous forme de pourcentage est fournie et que la hauteur est ignorée, le navigateur maintiendra le rapport largeur/hauteur de l'image, peu importe s'il l'agrandit ou le rétrécit. Cela signifie que le rapport hauteur/largeur de l'image ne changera pas et l'image ne sera pas déformée.

Voyez le HTML suivant :

<img src="/i/ct_1px.gif"} width="20%" />

C'est-à-dire, si vous ne définissez que la valeur en pourcentage de l'attribut width de l'image ct_1px.gif, vous obtiendrez une image rectangulaire (parce que le ct_1px.gif original est un rectangle de 1px de large et de haut) :


Essayez-le vous-même

Astuce :Nous fournissons des exemples ci-dessus pour vous aider à mieux comprendre l'utilisation des attributs height et width. Si vous avez besoin de grandes zones de couleurs unies pour décorer la page, il est préférable deUtiliser CSS pour créer une couleur de fond.

Explication détaillée des attributs height et width

Pourquoi utiliser les attributs height et width

Avez-vous vu le contenu du document se déplacer de manière désordonnée lors du chargement ? La raison en est que le navigateur doit constamment ajuster la mise en page de la page pour pouvoir afficher chaque image chargée. Le navigateur télécharge et analyse la largeur et la hauteur de l'image pour déterminer sa taille, puis laisse un rectangle correspondant dans la fenêtre d'affichage. Ensuite, le navigateur ajuste la mise en page de la page pour insérer l'image dans l'affichage. Cela nous montre également que les images sont des fichiers indépendants, qui sont chacun chargés séparément.

Cependant, ce n'est pas la meilleure méthode pour afficher un document, car le navigateur doit vérifier chaque fichier d'image et calculer leur espace sur l'écran avant de montrer le contenu adjacent et suivant du document. Cela peut entraîner un grand retard dans l'affichage du document, ce qui peut interrompre la lecture de l'utilisateur.

Pour les créateurs, une méthode plus efficace consiste à spécifier la taille de l'image à l'aide des attributs height et width de la balise <img>. De cette manière, le navigateur réserve déjà un emplacement pour l'image avant de la télécharger, ce qui accélère l'affichage du document et évite le déplacement du contenu du document. Ces deux attributs doivent être des valeurs entières et sont exprimées en pixels pour la taille de l'image. L'ordre d'apparition de ces attributs dans la balise <img> n'a pas d'importance.

Problèmes des attributs height et width

Bien que les attributs height et width de la balise <img> puissent améliorer les performances et vous permettre d'effectuer certaines astuces, il y a néanmoins des effets négatifs difficiles à gérer lors de leur utilisation. Même si les utilisateurs ont désactivé la fonction de téléchargement automatique des images, le navigateur doit encore afficher l'espace prévu pour l'image avec la taille spécifiée. Cela laisse généralement aux lecteurs un cadre vide, avec une icône sans signification, indiquant que c'est l'emplacement où l'image devrait être placée. Dans ce cas, la page apparaît très mal, comme si elle n'était pas terminée, et la plupart du contenu est inutile. Si vous ne spécifiez pas ces dimensions, le navigateur placera simplement une icône d'image dans le texte, ce qui permet au moins de lire quelques mots.

Pour ce problème, nous n'avons pas encore de solution, nous ne pouvons que souligner un point, c'est-à-dire d'utiliser attribut alt etTexte descriptifDe cette manière, le lecteur au moins sait ce qui manque ici. Nous recommandons néanmoins d'utiliser ces propriétés de dimension, car nous encourageons tout ce qui peut améliorer les performances du réseau.

Compatibilité des navigateurs

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

Balise HTML <img>