Ce que j'apprends chaque jour

Les images avec Bootstrap

 Janvier 2017
 

Standardisation des images


L'utilisation de Bootstrap et le fait que de plus en plus les visualisations des pages se font maintenant sur les smartphones nous imposent un format d'image nouveau.

Pour les images en mode portrait, ces dernières doivent être moins hautes et plus larges avec un ratio de 16x9.

Pour les images en mode portrait, nous souhaitons avoir des images plus carré donc avec un ratio 8x10.

Ainsi nous proposons de définir nos images avec les dimensions suivantes :

  • Pour les images en mode paysage : 1200x675 pixels. Rapport 19x9
  • Pour les images en mode portrait : 540x675 pixels. Raport 8x10

Insérer image centrée


Insérer image centrée sans légende



<div class="center-block text-center" style="max-width: 600px">
<img src="images/..." class="img-responsive center-block img-rounded" alt="">
</div>	

Insérer image centrée avec légende


Fig.1 - A view of Norway.

			
<figure style="max-width: ...px; background: #ddd; padding: 7px;" class="img-rounded center-block">
<img src="images/" alt="" width="100%" class="img-rounded img-responsive">
<figcaption style="padding: 10px 5px 5px 15px; display: block"><strong>...</strong><em> - ...</em></figcaption>
</figure>

Insérer image centrée avec légende dans un cadre en bas et à gauche


Image en bas - Texte de description de l'image

 
<div class="boximg" class="center-block" style="max-width: 600px">
<img class="img-rounded"src="images/..." alt="" width="100%">
<div class="bottomleft"><p><strong>...</strong> - <em>...</em>></p></div>
</div>

/* Style pour image centrée avec légende dans un cadre en bas et à gauche */

.boximg {
    position: relative;
    margin: 10px auto;
    padding: 10px 0 0 0;
	
}

.bottomleft {
    position: absolute;
    bottom: -7px;
    left: 0px;
    font-size: 16px;
    background: black;
    color: yellow;
    padding: 7px;
    opacity: 0.6;
    width: 100%;
}

Insérer image centrée avec légende en haut et à gauche


Texte en Haut - La couleur est définie en fonction de l'image

 
<div class="boximg" class="center-block" style="max-width: 600px">
<img class="img-rounded"src="images/..." alt="" width="100%">
<div class="topleft" style="color: black"><p><strong>...</strong> - <em>...</em>></p></div>
</div>

/* Style pour image centrée avec légende en haut et à gauche */

.boximg {
    position: relative;
    margin: 10px auto;
    padding: 10px 0 0 0;
	
}

.topleft {
    position: absolute;
    bottom: 7px;
    left: 0px;
    font-size: 16px;
    padding: 7px;
    width: 100%;
}

Insérer image centrée avec une légende animée pur CSS


Norvege

Paysage


<div class="imganimation center-block"  class="center-block" style="max-width: 600px;width:100%">
<figure>
<img class="img-responsive img-rounded center-block" src="images/..." alt="" />
<figcaption>
<h5><strong>...</strong></h5>
<p>...</p>
</figcaption>
</figure>
</div>

/* Style pour animation pure CSS */

.imganimation figure {
  position: relative;
  display: block;
  margin: 5px 0 10px 0;
}

.imganimation figcaption {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  font-size: .9em;
  color: #fff;
  background-color: rgba(0,0,0,.7);
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
}

/* Visualisation captions en survol */

.imganimation figure:hover figcaption {
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#aa000000,endColorstr=#aa000000);
}

/* Ajouter padding and margin le contenu de la légende */

.imganimation figcaption * {
  padding: 0 10px;
  margin: 0;
}

.imganimation figcaption *:first-child {
  padding-top: 5px;
}
.imganimation figcaption *:last-child {
  padding-bottom: 5px;
}

Insérer un texte autour d'une image


Image à droite


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 
			
<img src="images/..." style="max-width: 200px" class="pull-right img-responsive img-rounded" alt="" data-action="zoom">
<p>...</p>
<h6 class="clear">  </h6>

/* Style pour texte avec une image à droite */
.pull-right {
    width: 40%;
    float: right;
    margin: 10px 0px 10px 20px;
}

Image à gauche


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 
<img src="images/..." class="pull-left img-responsive img-rounded" alt="">
<p>...</p>
<h6 class="clear"> </h6>

/* Style pour texte avec une image à gauche */
.pull-left {
    width: 40%;
    float: right;
    margin: 10px 0px 10px 20px;
}

Insérer 2 images ou texte toujours côte à côte


2 images toujours côte à côte


Ici les deux images seront toujours affichées de la même manière, quelle que soit la taille de l'écran.

Affichage

Affichage


<div class="row">
<div class="col-md-6 col-xs-6">
<div class="center-block img-rounded text-center" style="background: #ddd; padding: 7px;">
<img src="images/" class="img-rounded img-responsive center-block" width="100%" alt="">
<p style="padding: 10px 5px"><em>...</em></p>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="center-block img-rounded text-center" style="background: #ddd; padding: 7px">
<img src="images/...="img-rounded img-responsive center-block" width="100%" alt="" data-action="zoom">
<p style="padding: 10px 5px"><em>...</em></p>
</div>
</div>
</div>

1 image et un texte toujours côte à côte


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


<div class="row">
<div class="col-md-4 col-xs-4">
<img src="images/..." class="img-rounded img-responsive center-block" width="100% alt="">
</div>
<div class="col-md-8 col-xs-8">
<p>...</p>
</div>
</div>