Les images et les Css - FAQ CSS

Comment supprimer la bordure bleue d'une image de lien en css?

Certain navigateur ajoute une bordure bleue aux images des liens. Pour supprimer cette bordure bleue souvent considérée comme indésirable, utilisez la propriété Css border avec la valeur none en pointant sur l'image (IMG) de lien (A).

Exemple de code Css pour supprimer bordure bleue d'image de lien :

a img{
  border : none;
}

Comment mettre une image dans une forme circulaire en Css ?

Mettre une image dans un cercle en Csss

Pour faire une image dans un cercle ou un ovale, vous devez utiliser la propriété Css border-radius soit sur l'image directement (img) soit sur une balise (X)HTML ayant votre image en arrière-plan. Vous pouvez vous aider du générateur de coins arrondis. pour trouver le code CSS de border-radius et de ses formes préfixées.

Exemple une balise image dans un cercle :

<style>
.image-ronde{
  width : 150px; height : 150px;
  border: none;
  -moz-border-radius : 75px;
  -webkit-border-radius : 75px;
  border-radius : 75px;
}
</style>
<img src="/img/exemple/filter-image.jpg" class="image-ronde">

Exemple une image en arrière-plan dans un cercle :

<style>
.image-ronde-bg{
  background-size : contain;
  background-position : 50% 50%; 
  background-image : url(/img/exemple/filter-image.jpg);
  display : inline-block;
  width : 150px; height : 150px;
  border: none;
  -moz-border-radius : 75px;
  -webkit-border-radius : 75px;
  border-radius : 75px;
}
</style>
<span class="image-rond image-ronde-bg"></span>

Exemple : L'image d'origine est de 150px X 150px.
Le grand rond est de 150px X 150px et le petit 70px X 70px.
Les deux premiers exemples sont avec la balise img.

Dans les deux exemples de code ci-dessus, l'image s'adapte à la taille donnée à l'élément. Si vous ne voulez pas que l'image s'adapte ou que vous voulez décaler l'image dans le cercle, alors vous devez utiliser la technique de l'image d'arrière-plan.
La propriété Css background-size va vous permettre modifier la taille, donc si vous la supprimée l'image ne s'adaptera pas.
La propriété background-position va vous permettre de positionner l'image.
Exemple d'image d'arrière-plan gardant sa taille initiale.

Comment supprimer l'espace sous l'image?

Supprimer l'espace sous l'image

exemple d'espace sous l'image Une image (img) dans un élément (X)HTML par défaut est alignée verticalement (vertical-align) en baseline ce qui fait que dans certain cas un espace est présent sous l'image. Cet espace est variable suivant la valeur de font-size ou line-height.
Donc pour supprimer cet espace, il vous faut changer l'alignement vertical (vertical-align) de l'image en top, bottom ou middle.

Code CSS :

.element-parent img{ vertical-align : bottom }

Si l'image est seule dans l'élément, vous pouvez aussi faire un display:block, mais l'image a un comportement de type bloc, ce qui ne vous conviendra pas forcément.

Exemple avec vertical-align:baseline :

Exemple avec vertical-align:bottom :

Exemple avec vertical-align:middle :

Exemple avec vertical-align:top :

Comment faire des images qui s'adaptent à son conteneur en Css?

L'image s'adapte en largeur à la taille de son conteneur

Vous pouvez en Css, faire en sorte qu'une image (img) s'adapte en largeur à son conteneur parent. Pour cela vous devez utiliser la propriété Css width à 100% sur l'image et préciser la propriété Css height à auto.
Les proportions de l'image seront respectées. L'image peut être plus grande en hauteur que son conteneur, si ce dernier à une hauteur spécifiée. Dans ce cas vous pouvez utiliser sur le conteneur la propriété Css overflow à hidden.

Exemple d'écriture Css d'une image adaptative en largeur en fonction de son conteneur :

.responsive-w{
  width : 100%; height : auto;
}

Exemple : L'image d'origine est des 75px X 75px.
Dans l'exemple ci-dessous, les conteneurs ont une largeur dans l'ordre : 75px, 100px, 35px et 35px X 10px pour les deux derniers.

Si vous voulez limiter l'agrandissement à la taille initiale de l'image mais autoriser des réductions, vous devez spécifier en plus la propriété Css max-width à la taille initiale de la largeur de l'image soit pour notre cas 75px.
Dans l'exemple ci-dessous, les conteneurs ont une largeur dans l'ordre : 75px, 100px et 35px.

Exemple d'écriture Css d'une image adaptative en largeur avec limitation d'agrandissement en fonction de son conteneur :

.responsive-w{
  width : 100%; max-width : 75px; height : auto;
}

Exemple : L'image d'origine est des 75px X 75px.

Si vous voulez limiter la réduction à la taille initiale de l'image mais autoriser des agrandissements, vous devez en plus spécifier la propriété Css min-width à la taille initiale de la largeur de l'image soit pour notre cas 75px.
Dans l'exemple ci-dessous, les conteneurs ont une largeur dans l'ordre : 75px, 100px et 35px.

Exemple d'écriture Css d'une image adaptative en largeur avec limitation de réduction en fonction de son conteneur :

.responsive-w{
  width : 100%; min-width : 75px; height : auto;
}

Exemple : L'image d'origine est des 75px X 75px.

L'image s'adapte en hauteur à la taille de son conteneur

Vous pouvez en Css, faire en sorte qu'une image s'adapte en hauteur à son conteneur parent. Pour cela vous devez utiliser la propriété Css height à 100% sur l'image et la propriété Css width à auto.
Les proportions de l'image seront respectées. L'image peu être plus grand en largeur que son conteneur si ce dernier à une largeur spécifiée. Dans ce cas vous pouvez utiliser sur le conteneur la propriété Css overflow à hidden.

Exemple d'écriture Css d'une image adaptative en hauteur en fonction de son conteneur :

.responsive-h{
  height : 100%; width : auto;
}

Exemple : L'image d'origine est des 75px X 75px.
Dans l'exemple ci-dessous, les conteneurs ont une hauteur dans l'ordre : 75px, 150px, 35px et 10px X 35px pour les deux autres.

Si vous voulez limiter l'agrandissement à la taille initiale de l'image mais autoriser des réductions, vous devez spécifier en plus la propriété Css max-height à la taille initiale de la hauteur de l'image soit pour notre cas 75px.

Exemple d'écriture Css d'une image adaptative en hauteur avec limitation d'agrandissement en fonction de son conteneur :

.responsive-h{
  height : 100%; max-height:75px; width : auto;
}

Exemple : L'image d'origine est des 75px X 75px.

Si vous voulez limiter la réduction à la taille initiale de l'image mais autoriser des agrandissements, vous devez spécifier en plus la propriété Css min-height à la taille initiale de la hauteur de l'image soit pour notre cas 75px.

Exemple d'écriture Css d'une image adaptative en hauteur avec limitation de réduction en fonction de son conteneur :

.responsive-h{
  height : 100%; min-height : 75px; width : auto;
}

Exemple : L'image d'origine est des 75px X 75px.

L'image s'adapte en hauteur et largeur à la taille de son conteneur

Vous pouvez en Css, faire en sorte qu'une image s'adapte en largeur et en hauteur à son conteneur parent. Pour cela vous devez utiliser la propriété Css width et height à 100% sur l'image.
Les proportions de l'image seront pas forcément respectées. L'image ne sera jamais plus grande que son conteneur.

Exemple d'écriture Css d'une image adaptative en hauteur et largeur en fonction de son conteneur :

.responsive-hw{
  width : 100%; height : 100%;
}

Exemple : L'image d'origine est des 75px X 75px.
Dans l'exemple ci-dessous, les conteneurs ont une largeur X hauteur dans l'ordre : 75px X 150px, 80px X 160px et 35px X 75px.

Comment positionner l'image par rapport au texte ?

Equivalence de l'attribut align de img en Css

En XHTML et les versions antérieures, l'attribut align d'IMG permettait au texte de s'aligner en haut à droite de l'image et de passer en dessous si nécessaire. L'attribut align a été supprimé au profit des Css.
Pour reproduire cet effet du texte qui glisse autour de l'image, vous devez pour cela la faire flotter en utilisant la propriété Css float.
L'espace entre l'image et le texte se gère avec la propriété Css margin.

Exemple pour faire flotter l'image à gauche du texte :

.image-align-left{
  float : left;
}
.image-align-right{
  float : right;
}
/* A mettre sur le parent pour éviter tout débordement de l'effet float */
.float-content:before,
.float-content:after{content:""; display:block; clear:both;}
</style><p class="float-content"><img src="/img/exemple/filter-image.jpg" class="image-align-left">
Texte ...
</p>
<p class="float-content"><img src="/img/exemple/filter-image.jpg" class="image-align-right">
Texte ...
</p>

Exemple de texte qui glisse autour de l'image à gauche ou à droite.

Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecipiendum fuit.

Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecip iendum fuit, ad tollamo endam amic itiam valet.

Comment appliquer un effet de filtre sur image en Css ?

Appliquer un effet sur une image en Css

En Css3, vous pouvez appliquer des effets a une image grâce à la propriété Css filter
"Les effets de filtre Css" décrit l'ensemble des effets possibles applicables à une image.
Voici des exemples visuels des effets de filtre Css possibles :

Comment recadrer une image en Css?

Recadrer une image HTML en Css?

Image à recader Il est possible de "recadrer" en Css une image (img) ou plus précisément redéfinir la zone rectangulaire visible. Prenons par exemple cette image, j'aimerais recentrer le cadre l'image autours de la fleur.
La première étape consiste à créer un conteneur "image-rogne-cadre" qui fera office de masque. Puis nous repositionnerons l'image à l'intérieur de ce conteneur.

Exemple de code pour recadrer un image (X)HTML :

<style>
.image-rogne-cadre{
  /* cache ce qui sort du conteneur */
  overflow : hidden;
  /* zone de recadrage conteneur */
  display : inline-block; width : 55px; height : 55px;
  /* Je suis l'axe d'origine des éléments fils positionnés */
  position : relative;
  vertical-align : middle;
}
.image-rogne-cadre img{
  /* Déclare un élément positionné */
  position : absolute;
  /* Décale l'image */
  left : -38px; top : -13px;
}
</style>
<span class="image-rogne-cadre">
  <img src="/img/faq/image-rogner.gif" alt="">
</span>

Exemple de recadrage d'une image HTML en Css :

Recadrer une image d'arrière en Css?

Il est possible de "recadrer" en Css une image d'arrière (background-image) ou plus précisément redéfinir la zone rectangulaire visible. La première étape consiste à créer un conteneur "image-rogne-cadre" qui fera office de masque. Puis nous repositionnerons l'image d'arrière-plan à l'intérieur de ce conteneur background-position.

Exemple de code pour recadrer un image d'arrière-plan :

<style>
.image-rogne-cadre{
  /* cache ce qui sort du conteneur */
  overflow : hidden;
  /* zone de recadrage conteneur */
  display : inline-block; width : 55px; height : 55px;
  background-image : url(/img/faq/image-rogner.gif);
  background-position :  -38px -13px;
}
</style><span class="image-rogne-cadre"></span>

Exemple de recadrage d'une image HTML en Css :

Comment mettre du texte sur l'image en Css?

Mettre un texte sur une image de type img

Pour afficher un texte sur une image, vous avez besoin de trois éléments. Un conteneur (figure) qui va contenir l'image (img) et une balise HTML contenant le texte (figcaption).

Exemple Code Html figure :

<figure>
  <img src="/img/exemple/filter-image.jpg" alt="">
  <figcaption>Légende pour cette photo</figcaption>
</figure>

Le principe consiste à positionner la balise de texte (figcaption) dans un contexte de positionnement (figure).
Grâce au positionnement, la balise de texte se trouve au dessus de l'image.

Exemple de code Css pour afficher le texte sur l'image au survol du curseur :

figure{ position : relative; display : inline-block; }
figure:hover figcaption{ 
  display : block;
  /* ou table-cell si vous avez besoin d'un alignement vertical */
}

figure figcaption{
  display : none; 
  position : absolute;
  bottom : 0; /* la zone de texte s'agrandit de bas en haut */
  /* ou top : 0; la zone de texte s'agrandit de haut en bas */
  left : 0; right : 0; /* voir règles*/
  background-color : #fff;
  padding : 2px;
  overflow : hidden; /* empêche le dépassement de texte */
  max-height:100%    /* limite la taille de la zone de texte */
}

Exemple d'affichage du texte sur l'image au survol du curseur :

Mettre le texte de l'attribut alt sur l'image

Pour afficher le texte de l'attribut alt sur une image, il vous faut passer par le Javascript pour reconstituer les 3 éléments cités dans l'exemple d'avant. Puis nous étudierons une autre technique qui va vous permettre de découvrir l'insertion de contenu en Css.

Exemple Code HTML de l'image au départ :

<!-- Image initiale -->
<img src="/img/exemple/filter-image.jpg" alt="Légende pour cette photo" class="classe-identifiante">

Javascript pour reconstituer les 3 éléments :

document.addEventListener('DOMContentLoaded',function(){
  var aImgs = document.getElementsByClassName("classe-identifiante");
  for(var i = 0;i < aImgs.length; i++){
    var oImg = aImgs[i], 
    oFigure = document.createElement("figure"),
    oFigcaption = document.createElement("figcaption");
    oImg.parentNode.insertBefore(oFigure, oImg); 
    oFigure.appendChild(oImg);
    oFigcaption.textContent = oImg.alt;
    oFigure.appendChild(oFigcaption);
  };
});

Le but de la seconde technique est de créer en Javascript un conteneur et de lui assigner une data à la valeur de alt de l'image. Puis avec Css, nous récupèrerons cette data pour l'afficher dans un élément anonyme Css.

Javascript pour ajouter un conteneur et un attribut data-* :

document.addEventListener('DOMContentLoaded',function(){
  var aImgs = document.getElementsByClassName("classe-identifiante-js");
  for(var i = 0;i < aImgs.length; i++){
    var oImg = aImgs[i],  
    oSpan = document.createElement("span");
    oImg.parentNode.insertBefore(oSpan, oImg); 
    oSpan.appendChild(oImg);
    oSpan.className="mafigure";
    oSpan.setAttribute("data-text", oImg.alt); 
  };
});

Exemple Code HTML après le passage du Javascript :

<span class="mafigure" data-text="Légende pour cette photo">
  <img src="/img/exemple/filter-image.jpg" alt="Légende pour cette photo" class="classe-identifiante">
</span>

Sur l'élément conteneur, nous créons un élément anonyme grâce au pseudo-élément :after et à la propriété Css content. Cet élément anonyme fonctionne exactement comme figcaption de l'exemple d'avant.

Exemple de code Css pour afficher le texte sur l'image au survol du curseur :

.mafigure{ position : relative; display : inline-block; }
.mafigure:hover:after{ 
  display : block;
  /* ou table-cell si vous avez besoin d'un alignement vertical */
}

.mafigure:after{ 
  content : attr(data-text);
  display : none; 
  position : absolute;
  bottom : 0; /* la zone de texte s'agrandit de bas en haut */
  /* ou top : 0; la zone de texte s'agrandit de haut en bas */
  left : 0; right : 0; /* voir règles*/
  background-color : #fff;
  padding : 2px;
  overflow : hidden; /* empêche le dépassement de texte */
  max-height:100%    /* limite la taille de la zone de texte */
}

Exemple d'affichage du texte sur l'image au survol du curseur :

Comment savoir si l'image est de type portrait ou paysage?

Connaitre le type portrait ou paysage n'est faisable qu'en Javascript

Il n'est pas possible à ce jour (05-2017) de savoir en pur Css, si une image est de type portrait ou paysage (landscape).
Pour le faire, vous devez passer par un petit script Javascript qui va lui déterminer si l'image a un format portrait ou landscape(paysage) et suivant le résultat assignera une classe portrait landscape.

La fonction javascript pour déterminer le type portrait ou landscape d'une image

La fonction initLandscapeClass() est capable de calculer si une image est de type paysage ou portrait que l'image soit dans une balise HTML IMG ou en background-image.
Elle prend en compte les nouvelles propriétés natural[Width|Height] si elles existent.
Si l'image est carrée, c'est portrait qui est assigné, à vous d'adapter la fonction pour quelle assigne carre dans ce cas là.
addClass() est disponible dans Manipuler les valeurs de l'attribut class.
getvalueCSS est disponible dans Accéder à toutes les propriétés css.

La fonction initLandscapeClass() accepte comme valeurs :

oImgSource : élément IMG ou l'élément qui contient l'image en background-image.
oCibleClass : élément sur lequel on va mettre la classe "portrait" ou "landscape", si élément est oImgSource alors mettre null.
sPrefix : optionnel, préfixe ajouté devant "portrait" ou "landscape".

Calcul si l'image est de type portrait ou landscape :

function initLandscapeClass(oImgSource, oCibleClass, sPrefix){
    var oImgTmp= new Image(), sUrlImg = '', sLandscape = 'landscape', sPortrait = 'portrait'
        , oCibleClass = (oCibleClass == null || oCibleClass == undefined)? oImgSource : oCibleClass
        , sPrefix = (sPrefix == undefined)? '' : sPrefix, sDisplayCss = 'display:block;width:auto;height:auto';
    oImgTmp.style='display:none';
    if(typeof(oImgTmp.naturalWidth) != 'undefined' && true == false){
        if(oImgSource.tagName.toUpperCase() == 'IMG'){
            if(oImgSource.complete == true){
                addClass(oCibleClass, sPrefix + ((oImgSource.naturalWidth <= oImgSource.naturalHeight)? sPortrait : sLandscape));
            }else{
                oImgSource.addEventListener('load', function(oEvent){
                    var oImg = oEvent.currentTarget;
                    addClass(oCibleClass, sPrefix + ((oImg.naturalWidth <= oImg.naturalHeight)? sPortrait : sLandscape));
                });
            }//else
            return true;
        }//if
    }//if
    if(oImgSource.tagName.toUpperCase() == 'IMG'){
        sUrlImg = oImgSource.src;
    }else{
        sUrlImg = getvalueCSS(oImgSource, 'background-image');
        sUrlImg = sUrlImg.replace(/(|)|"|'/gi,'');
        sUrlImg = sUrlImg.replace('url','');
    }//else
    document.body.appendChild(oImgTmp);
    oImgTmp.src = sUrlImg;
    if(oImgTmp.complete == true){
        oImgTmp.style = sDisplayCss;
        addClass(oCibleClass,sPrefix + ((oImgTmp.width <= oImgTmp.height)? sPortrait : sLandscape));
        oImgTmp.remove();
    }else{
        oImgTmp.addEventListener("load", function(oEvent){
            var oImg = oEvent.currentTarget;
            oImg.style = sDisplayCss;
            addClass(oCibleClass,sPrefix + ((oImg.width <= oImg.height)? sPortrait : sLandscape));
            oImgTmp.remove();
        });
    }//else
}

Exemple pour assigner une classe portrait ou landscape

Dans l'exemple suivant, nous allons tester si une image est de type paysage (landscape) ou portrait. Nous allons tester un élément HTML de type IMG et une une élément ayant un background-image.
Pour l'exemple, nous utiliserons une image de type portrait de taille 200px × 500px et une image de type paysage de taille 500px × 100px.

Code HTML pour l'exemple de classes paysage ou portrait :

<button type="button" onclick="declancherImg()">Le calcul du type d'image</button>
<div class="image-type">
  <img src="/img/faq/image-type-portrait.gif" alt="image de type portrait">
</div>
<div class="image-type">
  <div class="image-type-backp image-type-back"></div>
</div>
<div class="image-type">
  <img src="/img/faq/image-type-landscape.gif" alt="image de type landscape">
</div>
<div class="image-type">
  <div class="image-type-backl image-type-back"></div>
</div>

Dans le code CSS, vous trouver la classe image-type-landscape qui assignée affiche landscape et la classe image-type-portrait qui affiche portrait une fois assignée.

Code CSS pour l'exemple de classes portrait ou paysage :

.image-type:before{
  content:'quel type?';
}
.image-type-landscape:before{
  content:'landscape';
}
.image-type-portrait:before{
  content:'portrait';
}
.image-type-backp{
  background-image : url(/img/faq/image-type-portrait.gif);
}
.image-type-backl{
  background-image : url(/img/faq/image-type-landscape.gif);
}

Exemple assignant une classe portrait ou landscape :

Résultats:
Les deux premières images doivent avoir portrait et les deux autres landscape

Comment positionner une image dans une div comme en background-position?

Positionner une image comme en background-position

Si pour diverses raisons, vous ne pouvez pas mettre votre image en background-image, vous pouvez simuler le positionnement de votre balise image dans votre balise contenante à l'identique d'un background-position.

Exemple de remplacement :

<div style="background-image: url("/img/exemple/filter-image.jpg")" ></div>
Remplacer par : 
<div><img class="image" src="/img/exemple/filter-image.jpg"></div>

Exemple avec balise ou background-image en position center bottom :

background-image

Positionner une balise image dans une div comme en background-position (Css)

Définitions annexes

Définitions CSS annexes

:after: Le pseudo-élément CSS :AFTER de spécifier qu'un "contenu CSS" sera inséré à la fin du contenu d'un élément (x)HTML ou d'assigner à ce "contenu CSS" de...[ :after ]
background-image: La propriété d'Arrière-plan CSS BACKGROUND-IMAGE permet de mettre des ou une image d'arrière-plan ou un dégradé de couleur linéaire en arrière-plan ou...[ background-image ]
background-position: La propriété d'Arrière-plan CSS BACKGROUND-POSITION permet de positionner des ou une image (image de fond) au sein du même l'arrière-plan. Le coin hau...[ background-position ]
background-size: La propriété d'Arrière-plan CSS BACKGROUND-SIZE permet de modifier la taille des ou de l'image d'arrière-plan à l'intérieur de la zone d'arrière plan ...[ background-size ]
border: La propriété de bordure CSS BORDER est un raccourci qui permet de spécifier le style de la bordure Css (pointillé, solide,...), l'épaisseur de la bord...[ border ]
border-radius: La propriété de coin arrondi CSS BORDER-RADIUS est un raccourci qui permet de spécifier la courbe de l'arrondi Css des coins d'un élément (X)HTML, mai...[ border-radius ]
border-style: La propriété de Style de Bordure CSS BORDER-STYLE est un raccourci qui permet de spécifier le style des quatre bordures Css d'un élément, soit : - le ...[ border-style ]
border-width: La propriété de bordure CSS BORDER-WIDTH est un raccourci qui permet de spécifier l'épaisseur des quatre bordures Css d'un élément, soit : - l'épaisse...[ border-width ]
content: La propriété CSS CONTENT permet de spécifier en CSS un texte, une image ou des guillemets à insérer en tant que contenu Css. content est utilisée avec...[ content ]
filter: La propriété de Filtre CSS FILTER permet de spécifier une/des fonctions de Filtre CSS qui correspondront au divers effets à appliquer sur un élément H...[ filter ]
float: La propriété CSS FLOAT permet de spécifier qu'un élément flotte à gauche, à droite ou pas du tout au sein de son élément conteneur. Si l'élément est f...[ float ]
height: La propriété de Hauteur CSS HEIGHT permet de spécifier la hauteur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CSS...[ height ]
left: La propriété de Position CSS LEFT permet de spécifier la position du bord gauche de la marge d'un élément positionné par rapport au bord gauche de son...[ left ]
line-height: La propriété CSS LINE-HEIGHT permet de spécifier la hauteur d'une ligne de texte et donc aussi de gérer l'espace entre les lignes. Exemple d'écriture ...[ line-height ]
margin: La propriété de Marge CSS MARGIN permet de spécifier individuellement ou globalement l'espace entre la bordure d'un élément HTML ou XHTML et la bordur...[ margin ]
max-height: La propriété de Hauteur CSS MAX-HEIGHT permet de spécifier la hauteur maximale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d...[ max-height ]
max-width: La propriété de Longueur CSS MAX-WIDTH permet de spécifier la longueur maximale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple ...[ max-width ]
min-height: La propriété de Hauteur CSS MIN-HEIGHT permet de spécifier la hauteur minimale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d...[ min-height ]
min-width: La propriété de Longueur CSS MIN-WIDTH permet de spécifier la longueur minimale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple ...[ min-width ]
overflow: La propriété CSS OVERFLOW un raccourci qui permet de gérer la manière dont est rogné le contenu lorsque votre contenu est plus grand que la taille spé...[ overflow ]
position: La propriété de Position CSS POSITION permet de spécifier si un élément est positionné ou pas et spécifie par la même occasion son type de positionnem...[ position ]
top: La propriété de Position CSS TOP permet de spécifier la position du bord haut de la marge d'un élément positionné par rapport au bord haut de son pare...[ top ]
vertical-align: La propriété d'Alignement CSS VERTICAL-ALIGN permet de définir l'alignement vertical du texte ou plus globalement les éléments dits inline par rapport...[ vertical-align ]
width: La propriété de Longueur CSS WIDTH permet de spécifier la longueur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CS...[ width ]

Définitions HTML annexes

a: La balise HTML et XHTML A permer de faire un lien. Un lien est une zone cliquable qui vous permet d'accéder à une autre page HTML ou XHTML. L'attribut...[ a ]
img: La balise HTML et XHTML IMG permet de mettre une image dans le document html. <IMG> Exemple :<img src="../images/balise/rouge.gif" width="50" height="...[ img ]

Les images et les Css - FAQ CSS

Comment supprimer la bordure bleue d'une image de lien en css?

Supprimer la bordure bleue d'une image de lien

Comment mettre une image dans une forme circulaire en Css ?

Mettre une image dans un cercle en Csss

Comment supprimer l'espace sous l'image?

Supprimer l'espace sous l'image

Comment faire des images qui s'adaptent à son conteneur en Css?

L'image s'adapte en largeur à la taille de son conteneur

L'image s'adapte en hauteur à la taille de son conteneur

L'image s'adapte en hauteur et largeur à la taille de son conteneur

Comment positionner l'image par rapport au texte ?

Equivalence de l'attribut align de img en Css

Comment appliquer un effet de filtre sur image en Css ?

Appliquer un effet sur une image en Css

Comment recadrer une image en Css?

Recadrer une image HTML en Css?

Recadrer une image d'arrière en Css?

Comment mettre du texte sur l'image en Css?

Mettre un texte sur une image de type img

Mettre le texte de l'attribut alt sur l'image

Comment savoir si l'image est de type portrait ou paysage?

Connaitre le type portrait ou paysage n'est faisable qu'en Javascript

La fonction javascript pour déterminer le type portrait ou landscape d'une image

Exemple pour assigner une classe portrait ou landscape

Comment positionner une image dans une div comme en background-position?

Positionner une image comme en background-position