Les attributs height et width de la balise <img> en HTML
Exemple
Définir la largeur et la hauteur de l'image à 200 pixels :
<img src="/i/mouse.jpg" height="200" width="200" />
Définition et utilisation
L'attribut height et width de la balise <img> définit la taille de l'image.
Astuce :Il est une bonne habitude de spécifier les propriétés height et width pour une image. Si ces propriétés sont définies, une place est réservée pour l'image au moment du chargement de la page. Sans ces propriétés, le navigateur ne peut pas connaître la taille de l'image et ne peut pas réserver une place appropriée, donc le layout de la page change lorsque l'image est chargée. (Le texte suivant explique en détail cette idée).
Astuce :Ne pas redimensionner l'image à l'aide des propriétés height et width. Si l'image est réduite à l'aide de ces propriétés, l'utilisateur doit télécharger une image de grande taille (même si l'image semble petite sur la page). La bonne pratique consiste à traiter l'image à la bonne taille avec un logiciel avant de l'utiliser sur une page web.
Lecture recommandée :Explication détaillée des attributs height et width
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, c'est que l'on n'a pas besoin de spécifier la taille réelle de l'image, c'est-à-dire que ces deux valeurs peuvent être plus grandes ou plus petites que la taille réelle. Le navigateur ajuste automatiquement l'image pour qu'elle s'adapte à la taille de l'espace prévu. Avec cette méthode, il est facile de créer des miniatures pour des images grandes et 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 conservé, l'image sera déformée.
Une autre astuce pour utiliser les propriétés height et width est de 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 segment HTML, cette barre de couleur est faite avec une image d'un seul pixel :
Utiliser des pourcentages
L'un des derniers trucs pour utiliser la propriété width est d'utiliser des pourcentages au lieu de valeurs absolues en pixels. Cela fait que le navigateur redimensionne 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 largeur égale à la largeur de la fenêtre de visualisation et de 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, que ce soit pour l'agrandissement ou le rétrécissement. Cela signifie que le rapport hauteur/largeur de l'image ne changera pas et l'image ne sera pas déformée.
Voyez l'HTML suivant :
<img src="/i/ct_1px.gif" width="20%" />
C'est-à-dire, si vous ne définissez que la valeur en pourcentage de la largeur 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) :
Astuce :Vous pouvez essayer cela dans notre outil de test en ligneEssayez-le vous-même!
Astuce :L'objectif de ces exemples est de 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 deUtilisation de CSS pour créer une couleur de fond.
Support du navigateur
Tous les navigateurs supportent les attributs height et width.
Syntaxe
<img height="value" />
ou :
<img width="value" />
Valeur de l'attribut
| Valeur | Description |
|---|---|
| pixels | Valeurs de hauteur ou de largeur exprimées en pixels. |
| percent | Valeurs de hauteur ou de largeur exprimées en pourcentage du conteneur. |
Exemple pratique
- Ajustement de la taille de l'image
- Cet exemple montre comment ajuster l'image à différentes tailles.
Explication détaillée des attributs height et width
Pourquoi utiliser les attributs height et width
Avez-vous vu le contenu d'un document se déplacer de manière irrégulière lors du chargement ? Cela se produit parce que le navigateur doit constamment ajuster la mise en page de la page pour 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 une zone rectangulaire correspondante dans la fenêtre de visualisation. Ensuite, le navigateur ajuste la mise en page de la page pour insérer l'image. Cela nous indique également que les images sont des fichiers indépendants, chacun étant chargé séparément.
Cependant, ce n'est pas la méthode la plus efficace pour afficher un document, car le navigateur doit vérifier chaque fichier d'image et calculer leur espace sur l'écran avant de les afficher, ce qui peut entraîner un grand retard dans l'affichage du document, perturbant ainsi 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 du tag <img>. De cette manière, le navigateur réserve une place 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 indiquées en pixels. L'ordre d'apparition de ces attributs dans le tag <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 aussi quelques effets négatifs difficiles à gérer lors de leur utilisation. Même si l'utilisateur a désactivé la fonction de téléchargement automatique des images, le navigateur affichera toujours l'espace réservé pour l'image à la taille spécifiée. Cela laisse généralement au lecteur un cadre vide, avec une icône sans signification, indiquant que c'est l'emplacement où l'image devait être placée. Dans ce cas, la page paraî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 un peu de texte.
Pour ce problème, nous n'avons pas encore de solution, mais nous voulons insister sur un point : utilisez attribut altet d'autresTexte descriptifDe cette manière, le lecteur au moins sait ce qui manque ici. Nous recommandons néanmoins d'utiliser ces propriétés de taille, car nous encourageons tout ce qui peut améliorer les performances du réseau.
