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

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 () de lien ().

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 soit sur l'image directement () 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 .
Image dans une forme circulaire en Css

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 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.

Image dans une forme circulaire en Css

Comment supprimer l'espace sous l'image?

Supprimer l'espace sous l'image

exemple d'espace sous l'imageUne image () dans un élément (X)HTML par défaut est alignée verticalement () 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 :

dp
dp

Exemple avec vertical-align:bottom :

dp
dp

Exemple avec vertical-align:middle :

dp
dp

Exemple avec vertical-align:top :

dp
dp

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 () s'adapte en largeur à son conteneur parent. Pour cela vous devez utiliser la propriété Css à 100% sur l'image et préciser la propriété Css à 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 à 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 à 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 à 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 à 100% sur l'image et la propriété Css à 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 à 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 à 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 à 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 et à 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' 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 .
L'espace entre l'image et le texte se gère avec la propriété Css .

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
"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 :
Effet de flou gaussien sur une image Effet de changement la luminosité sur une image Effet sépia sur une image Effet inversion les couleurs sur une image Effet de rotation de la teinte sur une image Effet de saturation sur une image Effet d'opacité sur une image Effet niveaux de gris sur une image Effet niveaux de gris sur une image Effet d'ombre portée sur une image

Comment recadrer une image en Css?

Recadrer une image HTML en Css?

Image à recaderIl est possible de "recadrer" en Css une image () 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 :
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 () 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 .

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 :
Recadrage 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 :

Légende pour cette photo

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 et à la propriété Css . 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 :

Légende pour cette photo

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 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 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 :

image de type portrait
image de type 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 , vous pouvez simuler le positionnement de votre balise image dans votre balise contenante à l'identique d'un .

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 :

Balise
background-image

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