Ce que j'apprends chaque jour

Positionner des images avec Bootstrap

juillet 2017

Gestion des images

Aujourd'hui de plus en plus les sites web sont consultés sur les smartphones ou les tablettes. Nous devons ainsi trouver le meilleur format des images en fonction de ces nouveaux médias.

Pour les images au format paysage, nous devons céder des images plus larges et moins hautes soit un format de 16x9 et la taille de 1200x675 pixels enregistrés pour le web.

Pour les images au format portrait, le format sera de de 8x10 et la taille de 540x675 pixels.

Nous utiliserons pour l'enregistrement les photos sans transparence et les images d'arrière-plan, le format jpg et le format png pour les photos dégradés sur un fond transparent ou des logos, pictogrammes ou schémas.

La taille en pixels peut paraitre grande, mais elle est nécessaire pour la réalisation de zoom sur image que nous traitons ci-dessous.

 

Zoom sur image

Pour réaliser un zoom sur image nous utiliserons le code source hébergé sur la plateforme GitHub.

Source: Medium's Image Zoom for jQuery

Dans le partie Head nous placerons le code css :

<link rel="stylesheet" type="text/css" href="https://fat.github.io/zoom.js/css/zoom.css">

Dans le bas de notre page, nous placerons le code JavaScript :

<script src="https://fat.github.io/zoom.js/js/zoom.js"></script>

Pour chaque image que nous voulons zoomer nous ajouterons l'attribut data-action="zoom"

 

Une taille de police en fonction de la largeur d’écran

Afin d'éviter d'avoir un corps de texte trop grand sur les smartphones ou les tablettes, nous pouvons utiliser une unité pour les fonts qui n'est pas très répandue.

En plus des unités les plus connues comme px, em, rem ou pt nous utiliseront vmin soit "Viewport Min" qui correspond à l’unité relative à la plus petite des deux dimensions (largeur ou hauteur selon l’orientation)

Exemple en code CSS :

p {
font-size: 2.3vmin
}
 
Vue smartphone
Vue tablette
 
Vue PC
 

Création d'un groupe de 4 images

Le code HTLM a été développé de manière à pouvoir modifier les attributs en fonction de l'image.

Le texte peut ainsi être modifié directement avec :

  • La position : bottom ou top
  • La couleur en fonction du fond de l'image
  • La hauteur du texte avec font-size
 
Budapest - Eglise St Mathias
Budapest - Le Parlement
Budapest - Le pont des Chaînes
Budapest - La statue de la liberté

Pour créer ce groupe de 4 images, insérer le code HTLM suivant :

<div class="row">
<div class="col-sm-6">
<div style="position: relative;">
<img src="..." alt="" class="img-rounded"  style="width:100%;margin:10px 0" data-action="zoom">
<div style="position: absolute;bottom: 16px;left: 16px;font-size: 18px;color: yellow; font-size: 2.5vmin;"><strong>...</strong></div>
</div>
<div style="position: relative;">
<img src="..." alt="" class="img-rounded"  style="width:100%;margin:16px 0" data-action="zoom">
<div style="position: absolute;bottom: 16px;left: 16px;font-size: 18px;color: yellow; font-size: 2.5vmin;"><strong></strong></div>
</div>
</div>
						
<div class="col-sm-6">
<div style="position: relative;">
<img src="..." alt="" class="img-rounded"  style="width:100%;margin:16px 0" data-action="zoom">
<div style="position: absolute;bottom: 16px;left: 16px;font-size: 18px;color: yellow; font-size: 2.5vmin;"><strong>...</strong></div>
</div>
</div>
						
<div class="col-sm-6">
<div style="position: relative;">
<img src="..."alt="" class="img-rounded"  style="width:100%;margin:10px 0" data-action="zoom">
<div style="position: absolute;bottom: 16px;left: 16px;font-size: 18px;color: yellow; font-size: 2.3vmin;"><strong>...</strong></div>
</div>
</div>
</div>
 

Image centrée

Budapest-Bastion des Pecheurs
 

Pour créer une image centrée, insérer le code HTLM suivant :

<div class="row">
<div class="col-sm-12">
<div style="position: relative;">
<img src="..." alt="" class="img-rounded"  style="width:100%;margin:16px 0" data-action="zoom">
<div style="position: absolute;top: 16px;left: 16px;font-size: 18px;color: black; font-size: 2.3vmin;"><strong></strong></div>
</div>
</div>
</div>

Mur de 3 images

Budapest - Square de la liberté
Budapest - la nuit
Budapest - Place des héros

Pour créer ce groupe de 3 images, insérer le code HTLM suivant :

<div class="row">
<div class="col-sm-6">
<div style="position: relative;">
<img src="..." alt="" class="img-rounded"  style="width:100%;margin:16px 0" data-action="zoom">
<div style="position: absolute;top: 16px;left: 16px;font-size: 18px;color: red; font-size: 2.3vmin;"><strong>...</strong></div>
</div>
<div style="position: relative;">
<img src="..." alt="" class="img-rounded"  style="width:100%;margin:16px 0" data-action="zoom">
<div style="position: absolute;bottom: 16px;left: 16px;font-size: 18px;color: yellow; font-size: 2.3vmin;"><strong>...</strong></div>
</div>
</div>
<div class="col-sm-6">
<div style="position: relative;">
<img src="..."alt="" class="img-rounded center-block"  style="width:100%;margin:10px 0" data-action="zoom">
<div style="position: absolute;bottom: 16px;left: 16px;font-size: 18px;color: yellow; font-size: 2.3vmin;"><strong>...</strong></div>
</div>
</div>
</div>