Comment changer la taille de l'image en HTML

Dans la conception de sites Web, les images sont un élément très important, qui peuvent augmenter la beauté du site Web et attirer l'attention des utilisateurs. Dans de nombreux cas, nous devons modifier la taille de l’image pour obtenir le meilleur effet. Cet article présente principalement comment utiliser HTML pour modifier la taille de l'image.

En HTML, il existe deux manières courantes de modifier la taille de l'image : en utilisant les attributs width et height de la balise img et en utilisant les styles CSS. Présentons-les un par un.

Utilisez les attributs width et height de la balise img

La balise img est une balise utilisée pour insérer des images en HTML. L'utilisation la plus basique est la suivante :

<img src="image.jpg" alt="图片" />

Parmi eux, l'attribut src est utilisé pour spécifier le chemin. de l'image, et l'attribut alt est utilisé pour spécifier le chemin de l'image. Nous devons maintenant modifier la taille de l'image, ce qui peut être obtenu grâce aux attributs width et height. Ces deux attributs peuvent spécifier la largeur et la hauteur de l'image, et l'unité peut être des pixels (px), un pourcentage (%) ou em (un multiple de la taille de la police par rapport à l'élément parent).

Voici un exemple :

<img src="image.jpg" alt="图片" width="200px" height="150px" />

Ce code définit la largeur de l'image à 200 pixels et la hauteur à 150 pixels. Il est à noter que si une seule des propriétés est définie, l'autre propriété sera automatiquement ajustée en fonction de la proportion de l'image originale pour garantir que l'image ne sera pas étirée ou compressée.

Utilisation des styles CSS

En plus d'utiliser les attributs width et height de la balise img, nous pouvons également utiliser les styles CSS pour modifier la taille de l'image. L'avantage est que la taille de toutes les images peut être contrôlée uniformément dans une seule feuille de style, réduisant ainsi la répétition du code.

Pour utiliser CSS pour modifier la taille de l'image, nous devons définir une classe pour la balise img puis définir le style correspondant en CSS. Voici un exemple :

<img src="image.jpg" alt="图片" class="picture" />

.picture {
  width: 200px;
  height: 150px;
}

Ce code obtient l'effet de modifier la taille de l'image en ajoutant l'attribut class à la balise img et en définissant la classe .picture en CSS. Il convient de noter que pour garantir que les styles CSS prennent effet, la feuille de style doit être liée à la page Web.

En même temps, nous pouvons également utiliser des pourcentages pour définir la taille de l'image, par exemple :

.picture {
  width: 50%;
  height: 50%;
}

Ce code définit la taille de l'image à la moitié de la taille d'origine, ce qui peut facilement mettre en œuvre un design réactif et s'adapter à appareils de différentes tailles d’écran.

Résumé

Dans la conception Web, modifier la taille des images est une exigence courante. Nous pouvons facilement réaliser cette fonctionnalité en utilisant les attributs width et height de la balise img ou les styles CSS. Il convient de noter que afin de garantir les performances de la page Web, il est préférable d'utiliser des tailles d'image appropriées pour éviter de charger des images trop volumineuses qui affectent l'expérience utilisateur.

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!