Accueil

Débuter en HTML & CSS - sommaire

Pour des pages dynamiques : PHP & SQL

Quelques bonnes raisons d'utiliser PHP Les tableaux PHP Les fonctions PHP Les structures de contrôle PHP Traiter les données de formulaire Sessions et cookies Site avec une base de données : notions de SQL SQL : les requêtes SELECT SQL : les requêtes INSERT, UPDATE, DELETE

Vous pouvez me contacter via Facebook (questions, critiques constructives) : page facebook relative à mon site

Débuter en HTML & CSS : insérer des images dans une page web

Dans un chapitre précédent je vous ai présenté les différents types d'images pouvant être insérés dans une page web : les images matricielles et moins connues mais promis à un bel avenir, les images vectorielles (le plus souvent au format SVG).
Pour insérer une image (matricielle ou vectorielle) dans une page vous pouvez utiliser HTML ou CSS.

Emploi du HTML : la balise IMG

Pour insérer une image dans une page, le plus simple est d'utiliser HTML et plus précisèment la balise IMG.
L'image sera à l'occasion redimensionnée.

Disposition par défaut des images

Le code correspondant

... <img src ='../images/trikini.jpg' style ="width : 30%;" > <img src ='../images/bikini.jpg' style ="width : 30%;" >

Notez que la balise IMG est une balise simple ; elle ne peut contenir aucune autre balise.

Ces deux images sont côte à côte c'est logique. Par défaut la balise IMG est une balise "inline".
Les deux images sont redimensionnées : largeur = 30% de celle du conteneur parent ; hauteur recalculée dans le respect des proportions.

Par défaut les images sont alignées verticalement par le bas ! Ce qui n'est pas très joli. En effet valeur par défaut de vertical-align est "baseline".

Solution

trikini bikini

Le code corrigé :

<img src ='../images/trikini.jpg' style =" width : 30% ; vertical-align: top;" alt ="trikini"> <img src ='../images/bikini.jpg' style =" width : 30% ; vertical-align: top;" alt ="trikini">

L'attribut alt n'est pas obligatoire pour le navigateur mais exigé par la spécification sinon le code HTML n'est pas considéré comme valide.
La valeur de cet attribut est un texte alternatif qui s'affiche uniquement si l'image n'a pu être chargée.
Cet attribut est aussi utilisé dans le cadre du SEO (référencement naturel de la page).

J'ai rajouté aussi une règle de style en ligne via l'attribut style.
Il serait plus logique de créer une classe CSS pour simplifier le code HTML.

Classe dans feuille de style : img.mini {width : 30% ; vertical-align: top;} Code HTML est alors plus simple : <img src ='../images/trikini.jpg' class ="mini" ... > <img src ='../images/bikini.jpg' class="mini" ... >

Disposer les images dans un tableau HTML

Les huit images ci-dessous sont chacune dans une cellule d'un tableau.

Saumon

Hareng

Anguille

Morue

Sole

Vive

Maquereau

Tacaud

Le code correspondant

Deux règles de style : 

	td img {display : block; width : 300px ; height : auto ; margin :10px auto 10px auto ; vertical-align : top;}
	td p {text-align : center; }

Deux règles de style pour les images et les paragraphes contenus dans des cellules de tableau (balise TD).

Le code HTML :

<table> <tr><td><img src ="../img_bio/saumon.jpg" alt><p>Saumon</td> <td><img src ="../img_bio/hareng.jpg" alt><p>Hareng</td></tr> <tr><td><img src ="../img_bio/anguille.jpg" alt><p>Anguille</td> <td><img src ="../img_bio/morue.jpg" alt ><p>Morue</td></tr> <tr><td><img src ="../img_bio/sole.jpg" alt ><p>Sole</td> <td><img src ="../img_bio/vive.jpg" alt ><p>Vive</td></tr> <tr><td><img src ="../img_bio/maquereau.jpg" alt><p>Maquereau</td> <td><img src ="../img_bio/tacaud.jpg" alt><p>Tacaud</td></tr> </table>

Si l'attribut ALT est obligatoire pour que le code HTML soit valide, une valeur reste facultative.

Centrage de l'image dans sa boîte parente : technique ancienne

bukini nu artistique

Ces deux images sont centrées horizontalement.

Le code CSS & HTML correspondant

... img.centrage {display : block ; width : 40%; margin :10px auto 10px auto; } </style></head> <body> ... <img src ='../images/burkini.jpg' class="centrage" alt ="bukini" title ="bof !"> <img src ='../images/black_nue.jpg' class ="centrage" alt ="nu artistique" title ="jolie !"> ...

J'ai rajouté à chaque élément IMG l'attribut TITLE. Il y a alors ajout d'une étiquette lisible seulement lorsque l'utilisateur laisse la souris sur l'image.
Grâce à la classe "centrage" l'image concernée devient un élément "block" qui est centré horizontalement dans son conteneur avec une largeur égale à 40% de celle du conteneur.
Je rappelle que "margin:auto" ne peut s'appliquer qu'à des éléments "block" !

Nouvelle technique pour centrer : emploi de la balise FIGURE

La spécification HTML 5 introduit la balise FIGURE.
Je n'en dis pas plus, visitez dans le même site le "tutoriel HTML - version 5".

Positionner une image ou plusieurs images "inline" dans sa boite "parente"

photo sexy

Blabla ...
blabla ...
blabla ...
blabla ...
blabla ...
blabla ...

photo sexy photo sexy

Blabla ...
blabla ...
blabla ...
blabla ...
blabla ...

Le code CSS & HTML correspondant

... img.left {height :100px ; width : auto; float : left ; margin : 1% ; } img.right {height:100px ;width : auto ; float : right ; margin : 1% ; } ... <div> <img src ='../images/seins_nus.jpg' class='left' alt ="photo sexy"> <p>Blabla ...<br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... </div> <div> <img src ='../images/latino_bikini.jpg' class='right' alt ="photo sexy" > <img src ='../images/noire_bikini.jpg' class='left' alt ="photo sexy" > <p>Blabla ... <br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... </div>

Pour placer un élément "inline" dans une boite il faut utiliser la propriété float : left / right
Les images peuvent déborder de leur boite !

Par défaut une boite adapte sa hauteur au texte contenu et non pas par rapport à la hauteur de l'image contenue.
La solution : donner une hauteur minimale à chaque boite DIV, par exemple min-height : 150px

Risque de déformation d'une image

Exemple

Règle de style dans la feuille de style externe : 

	img {width : 200px ; }

Règle de style dans la feuille de style de la page : 

	img {height : 200px ; }

Conséquence : dans la page toutes les images seront affichées avec la taille 200 par 200.
Donc si leur ratio d'origine largeur/hauteur est différent de un, les images seront déformées !!!

Solution :
Dans la feuille de style interne il faut écrire la règle de style de la façon suivante : 

	img {height : 200px ; width : auto ;  }

Vous forcez le navigateur à recalculer la largeur (width : auto) afin de respecter le ratio d'origine entre hauteur et largeur.

Classes pour les éléments IMG

Dans une page certaines images doivent être affichées avec une grande taille, d'autres avec une taille moyenne et enfin d'autres doivent être minuscules (logo).
Il est donc fortement conseillé de créer différentes classes pour les éléments IMG.

Le code d'une page

... body {width : 800px ; margin : auto ; } img.logo {height : 100px; width : auto ; float : left; margin : 10px; } img.grand {display : block ;width : 80% ; height : auto; margin : 10px auto 10px auto; } img.diapo {height : 200px ; width : auto ; margin : 1%; } ... <div style ="border : 1px solid black;"> <img src ='../images/bikini7.jpg' class='logo'> <p>Blabla ...<br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... </div> <img src ='../images/bikini6.jpg' class ='grand' ... > <img src ='../images/latino_bikini.jpg' class='diapo' ...> <img src ='../images/noire_bikini.jpg' class='diapo' ...>

CSS : 3 classes pour les images ; à chaque fois recalcul de la largeur en fonction de la hauteur ou inversement afin qu'il n'y ait jamais déformation.

HTML : chaque image se voit appliquer une classe. Rendu de ce code

Autres balises pour insérer des images

Dans certains cas un document SVG (document Inkscape le plus souvent) ne peut être inséré avec la balise IMG ; il faut alors utiliser la balise OBJECT. Voir tutoriel Inkscape

La norme HTML5 propose aussi la nouvelle balise PICTURE.
Cette balise est très utile pour faire du "responsive design" puisqu’elle permet de changer la source d’une image en fonction de la taille d’écran. Voir tutoriel HTML - version 5

Insérer une image via CSS

Les propriétés CSS préfixées "background-" (ou le raccourci "background") peuvent être employées pour placer une image en guise de fond d'une boite.
Le texte éventuel de la boite se placera au dessus de l'image !

Exemple 1

Une boite avec en fond une image dupliquée et du texte :

La propriété background est très utile :
Blabla ...
Blabla ...
Blabla ...
Blabla ...

Le code correspondant

<div style ="width : 80%; margin : auto ; height : 200px ; background : url(../images/css3_logo.jpg)"> <p style ="color : red;"> La propriété background est très utile : <br>Blabla ... <br>Blabla ... <br>Blabla ... <br>Blabla ... </div>

Si vous voulez superposer du texte sur une image il faut créer une boite contenant l'image via le raccourci background
Cette image doit être relativement transparente afin que le texte reste lisible.
Par défaut si l'image est insérée avec sa taille native et si celle-ci est plus petite que la boite conteneur, elle est répétée sur les deux axes car la valeur par défaut de "background-repeat" est "repeat" !

Exemple 2

La propriété background est très utile :
Blabla ...
Blabla ...
Blabla ...
Blabla ...

L'image n'est insérée qu'une fois !

Le code correspondant

<div style ="width : 80%; margin : auto ; height : 200px ; background-image : url(../images/html5_logo.png) ; background-repeat : no-repeat;"> <p style ="color : red;"> La propriété background est très utile : <br>Blabla ... <br>Blabla ... <br>Blabla ... <br>Blabla ... </div>

A la place du raccourci "background" j'ai utilisé deux propriétés préfixées "background-".

CSS3 et propriétés "background-"

Avec la spécification CSS 3, de nouvelles propriétés préfixées "background-" apparaissent.
Je n'en dis pas plus dans cette page ; visitez le tutoriel CSS.
Vous verrez que les nouveautés sont impressionnantes ... Tutoriel CSS - version 3