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

PDF download Télécharger l'article
Coécrit par l'équipe de wikiHow

PDF download Télécharger l'article

La taille d’une image en pixels est définie par ses valeurs de largeur et hauteur en HTML. En HTML 4.01, la hauteur pouvait être définie en pixels ou en pourcentage de l’élément conteneur. En HTML 5, la valeur doit être en pixels. Apprenez à définir la largeur et hauteur d’une image en langage HTML.

Étapes

PDF download Télécharger l'article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/82\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/82\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Les ordinateurs Windows et MAC ont des programmes d’éditeurs de texte par défaut comme Notepad et Text Edit qui vous permettront de créer ou éditer du HTML. Vous pouvez soit ouvrir le document HTML dans ces programmes en cliquant Ouvrir dans l’onglet Fichier , soit faire un clic droit sur le fichier dans votre explorateur de fichiers et cliquer sur Ouvrir avec .
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/00\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/00\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    <img src="imagefile.jpg" alt="Image" height="42" width="42"> .
    • src est le chemin d’accès à votre image.
    • alt est le tag attribué à votre image.
    • Veuillez noter que ces chiffres sont en pixels.
    • Vous pouvez également utiliser le tag style . Par exemple, le code suivant est inséré dans votre texte : <img src="imgfile.jpg" alt="Image" style="width:500px;height:600px;"> . Grâce au tag style , l’image conserve la même taille qui l’emporte sur toute autre commande relative à la taille  [1] .
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/be\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/be\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Par exemple, si vous entrez 21 dans la zone width et la zone height , vous obtiendrez une image dont la taille fait la moitié de celle de l’image originelle.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a5\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a5\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ouvrez-le en utilisant n’importe quel navigateur pour voir les modifications. Si la taille de l’image ne vous convient pas, vous pouvez répéter les étapes précédentes  [2] .
    Publicité

Conseils

  • Spécifiez toujours les valeurs de hauteur et largeur de l’image. Si celles-ci sont définies, l’espace requis pour l’image est conservé quand la page charge. Mais sans ces valeurs, le navigateur ne connait pas la taille de l’image et ne peut pas lui accorder l’espace qui lui convient. La mise en page sera alors modifiée lors du chargement (pendant que l’image charge).
  • Réduire la taille d’une image en utilisant les valeurs hauteur et largeur contraint l’utilisateur à télécharger une image large (même si elle semble petite sur la page). Afin d’éviter cela, redimensionnez votre image à l’aide d’un programme avant de l’utiliser dans une page.
Publicité

wikiHows en relation

Comment
devenir un hacker
Comment
créer une pluie de code façon Matrix dans votre invite de commande.
Comment
mettre en forme du texte en code sur Discord
Comment
définir une image en fond de page en HTML
Comment
insérer des espaces dans un code HTML
Comment
mettre une couleur de fond de page en HTML
Comment
souligner du texte en HTML
Comment
voir le code source
Comment
créer sa première page Web en langage HTML
Comment
commencer à apprendre la programmation informatique
Comment
centrer un texte en HTML
Comment
créer un fichier exécutable (.exe)
Publicité

Références

  1. ↑ https://www.w3schools.com/html/html_images.asp
  2. ↑ https://www.w3schools.com/tags/att_img_width.asp

À propos de ce wikiHow

Autres langues 
Cette page a été consultée 130 105 fois.

Cet article vous a-t-il été utile ?

Publicité