Comment définir la largeur et la hauteur d'une image en utilisant HTML

Auteur: Clyde Lopez
Date De Création: 17 Juillet 2021
Date De Mise À Jour: 1 Juillet 2024
Anonim
Tech Meetup #10 : CSS Good Practices
Vidéo: Tech Meetup #10 : CSS Good Practices

Contenu

Cet article va vous montrer comment définir la hauteur et la largeur d'une image en HTML.

  • L'attribut "width" définit la largeur de l'image (en pixels).
  • L'attribut "hauteur" définit la hauteur de l'image (en pixels).
  • En HTML4.01, la hauteur peut être définie en pixels ou en pourcentage, mais en HTML5, uniquement en pixels.

Pas

  1. 1 Ouvrez le fichier HTML. Par exemple, ouvrez le fichier default.html.
  2. 2 Ajoutez la ligne suivante à votre code HTML.
    • img src = "fichierimage.webp" alt = "Image" hauteur = "42" largeur = "42">
    • src contient le chemin d'accès au fichier graphique (image).
    • en alt, la taille de l'image est définie.
  3. 3 Remplacez les valeurs des attributs de hauteur et de largeur par vos valeurs souhaitées. Par exemple, comme ceci : hauteur = "19" largeur = "20"
  4. 4 Enregistrez le fichier et ouvrez-le dans n'importe quel navigateur Web. Faites ceci pour vérifier comment l'image est redimensionnée. L'attribut "width" est pris en charge par tous les principaux navigateurs (Google Chrome, Safari, Mozilla Firefox, Opera, Internet Explorer).

Conseils

  • Réglez toujours la hauteur et la largeur de l'image. Ainsi, lorsque la page est chargée, l'espace est réservé pour l'image. Sinon, le navigateur ne connaîtra pas la taille de l'image et ne réservera pas d'espace, ce qui entraînera une modification de la mise en page au fur et à mesure du chargement de la page.
  • Si la taille de la grande image est réduite à l'aide des attributs "hauteur" et "largeur", l'utilisateur chargera la grande image (même si elle apparaît petite sur la page). Par conséquent, nous vous recommandons de redimensionner d'abord l'image dans un éditeur graphique.