Comment changer la taille de l'image en HTML

Comment changer la taille de l'image en HTML : créez d'abord un exemple de fichier HTML ; puis créez une image via img ; enfin définissez la taille de l'image via les attributs de hauteur et de largeur.

L'environnement d'exploitation de cet article : système Windows 7, version HTML5, ordinateur DELL G3

Comment modifier la taille de l'image en HTML ? Les attributs de hauteur et de largeur de la balise

définissent les dimensions de l'image.

Conseil : C'est une bonne pratique de spécifier les attributs de hauteur et de largeur pour les images. Si ces propriétés sont définies, de l'espace peut être réservé aux images lors du chargement de la page. Sans ces attributs, le navigateur ne peut pas comprendre les dimensions de l'image et réserver un espace approprié pour l'image, de sorte que la mise en page de la page change lors du chargement de l'image. (Cette idée est expliquée en détail ci-dessous).

Conseil : veuillez ne pas redimensionner les images via les attributs de hauteur et de largeur. Si l'image est réduite via les attributs height et width, l'utilisateur devra télécharger l'image plus grande (même si l'image paraît petite sur la page). L'approche correcte est qu'avant d'utiliser l'image sur la page Web, l'image doit être traitée à la taille appropriée via un logiciel.

Changer la taille de l'image - créer une image remplie

Les propriétés de hauteur et de largeur ont une propriété cachée selon laquelle il n'est pas nécessaire de spécifier la taille réelle de l'image, qui c'est-à-dire que ces deux valeurs peuvent être supérieures ou inférieures à la taille réelle. Le navigateur redimensionnera automatiquement l'image pour l'adapter à cet espace réservé. En utilisant cette méthode, vous pouvez facilement créer des vignettes pour de grandes images, ainsi qu'agrandir de très petites images. Mais attention : le navigateur doit toujours télécharger l'intégralité du fichier, quelle que soit sa taille d'affichage finale, et l'image sera déformée si son rapport largeur/hauteur d'origine n'est pas conservé.

Une autre technique utilisant les attributs de hauteur et de largeur consiste à rendre très facile le remplissage de la zone de la page, tout en améliorant également les performances du document. Imaginez si vous vouliez placer une barre horizontale colorée dans votre document. Vous n'avez pas besoin de créer une image en taille réelle ; à la place, vous créez une image de 1 pixel de largeur et 1 pixel de hauteur, et vous lui donnez la couleur que vous souhaitez utiliser. Utilisez ensuite les propriétés de hauteur et de largeur pour l'étendre à une taille plus grande.

<img  src="/static/imghw/default1.png"  data-src="/i/ct_1px.gif"  class="lazy"      style="max-width:90%" height="30px" / alt="Comment changer la taille de l'image en HTML" >

C'est l'effet du HTML ci-dessus. Cette barre de couleurs est réalisée à partir d'une image avec un seul pixel :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!