HTML <img> attribut width

Balise HTML <img>

Définition et utilisation

width L'attribut spécifie la largeur de l'image en pixels.

提示：Pour spécifier l'image height et width C'est une bonne habitude. Si ces attributs sont définis, de l'espace peut être réservé pour l'image au moment du chargement de la page. Sans ces attributs, le navigateur ne peut pas connaître la taille de l'image et ne peut pas réserver l'espace approprié, donc le layout de la page change lors du chargement de l'image. (Le reste de l'article explique cette idée en détail).

提示：Ne pas utiliser height et width l'attribut est utilisé pour agrandir l'image. Si l'height et width Si l'attribut est utilisé pour réduire l'image, 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 en taille appropriée par le logiciel avant de l'utiliser sur une page web.

Lisez également :详解 height 和 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">

亲自试一试

Syntaxe

<img width="pixels">

Valeur de l'attribut

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

Plus d'exemples

Modifier 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 ajuste automatiquement l'image pour qu'elle s'adapte à la taille de l'espace réservé. 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 toujours télécharger le fichier entier, peu importe la taille finale de l'image 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.

width="200px" height="30px" />

Voici l'effet de ce segment 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 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 la même largeur que la fenêtre de visualisation et d'une hauteur de 30 pixels, vous pouvez le faire ainsi :

width="60%" height="30px" />

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

提示：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 l'HTML suivant :

width="20%" />

也就是说，如果只设置图像 ct_1px.gif 的 width 属性的百分比值，会得到一个矩形图像（这是因为原始的 ct_1px.gif 就是一个只有 1px 宽和高的矩形）：


亲自试一试

提示：我们提供以上例子的目的是为了使您更好地理解 height 和 width 属性的用法。如果您只是需要大面积的纯色块来装饰页面，那么更好的办法是使用 CSS 来创建背景色。

详解 height 和 width 属性

为什么要使用 height 和 width 属性

您是否见过当文档加载时其内容会显示不规律的移动。之所以会这样，是因为浏览器为了能够显示每一个加载的图像，而不断地重新调整页面的布局。浏览器通过下载并解析出图像的宽度和高度来决定图像的大小，然后就会在显示窗口中留出一个相应的矩形空间。然后浏览器就会调整页面的显示布局，以便把图像插入到显示当中。这同时也告诉我们，图像是独立的文件，它与源文件都分别是独立加载的。

但是这不是一种最有效的显示文档的方法，因为浏览器在显示相邻的以及后面的文档内容之前，必须要检查每一个图像文件，并计算它们的屏幕空间。这可能会给文档的显示带来非常大的延迟，从而打断用户的阅读。

对于创作者来说，一种更为有效的方法是通过 标签的 height 和 width 属性来指定图像的尺寸。这样的话，浏览器在下载图像之前就为其预留出了位置，从而可以加速文档的显示，还可以避免文档内容的移动。这两个属性都要求是整数值，并以像素为单位来表示图像尺寸。这两个属性在 标签中出现的次序并不重要。

height 和 width 属性的问题

虽然 标签的 height 和 width 属性能够改善性能并让你实现一些小技巧，但在使用它们时还是有一些棘手的负面效果。即使用户已经关掉了自动下载图像的功能，浏览器还是要把为图像预留的空间以指定的尺寸显示出来。而这样留给读者的通常是一个空的框架，里面有一个毫无意义的图标，表示这是放置图像的位置。这时页面将看上去非常糟糕，就像根本没有完成一样，并且大部分内容都毫无用处。如果不用这些指定的尺寸，则浏览器将只是在文本中放置一个图像图标，这样显示中至少还有一些文字可以阅读。

Pour cette question, 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 toutefois d'utiliser ces propriétés de taille, 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>