Ajouter une image en HTML et CSS

Devenir un lion dans la jungle du numérique

Ajouter une image en HTML et CSS

Pour insérer une image sur une page HTML, il faut utiliser la balise HTML <img>

<img src="./chemin/vers/le/dossier/nomDeImage.jpg"

Elle s’affichera alors sur votre page HTML.

Pour le chemin dans le paramètre src de la balise img, souvenez vous que le point de départ est votre fichier HTML => ( ./ )

Ensuite chaque / correspond à l’entrée dans un dossier suivi du nom du dossier (sur une structure classique vous devriez donc avoir ./assets/img/ )

Et pour finir le nom de votre image à insérer suivi de son extension (exemple: image.png ou image.jpg )

 

Afin de faciliter votre mise en page, une bonne pratique est de toujours encapsuler votre image dans une div.

Mettre l’image en width à 100% (elle sera alors égale à 100% de la div parente)

<div class='image_container'>
  <img src="./assets/img/image.png">
</div>

On joue ensuite sur la taille de l’image ou son positionnement sur le CSS de la div contenant l’image !

.image_container img{
  width: 100%; 
  /*toujours mettre le width de l'image à 100% de son parent*/
}

.image_container{
  width: 300px; 
}

On ne rajoute jamais sur la propriété height (hauteur) d’une image, le rendu va déformé votre image  et casser le ratio largeur / hauteur d’origine !

N’oubliez pas le paramètre “alt” dans la balise img

<img src="./assets/img/image.png" alt="image">

Le paramètre alt sert à indiquer:

_au moteur de recherche une description de votre photo

_au déficient visuel une aide audio pour la description de votre photo

_un texte alternatif si votre photo n’est pas accessible

 

Si vous souhaitez ajouter du texte sur votre photo, il vous suffira de rajouter le texte dans la div contenant votre photo comme ceci:

<div class="image_container">
  <img src="assets/img/image.png">
  <p>Titre photo</p>
</div>

Pour le CSS :

.image_container img{
  width: 100%; 
  /*toujours mettre le width de l'image à 100% de son parent*/
}

.image_container{
  width: 300px;
  position: relative; /*devient le référent des enfants en position absolute*/ 
}

.image_container p{
  position: absolute; /*la position du texte sera a positionner par rapport au conteneur*/
  bottom: 5px;
}

 

En continuant à utiliser le site, vous acceptez l’utilisation des cookies. Plus d’informations

Les paramètres des cookies sur ce site sont définis sur « accepter les cookies » pour vous offrir la meilleure expérience de navigation possible. Si vous continuez à utiliser ce site sans changer vos paramètres de cookies ou si vous cliquez sur "Accepter" ci-dessous, vous consentez à cela.Plus d'informations ici

Fermer