Sommaire

Les conteneurs de média

1. Les objectifs

Foundation vous propose plusieurs types de conteneur pour y insérer vos médias. Les images seront placées dans une boîte <div> spécifique et le texte sera inséré dans une autre boîte <div>. Par défaut l’image sera affichée sur la gauche du bloc de texte.

Des classes permettent de choisir l’alignement de l’image et permettent aux images d’être "responsives". 

2. L’affichage de l’image par défaut

L’ensemble des éléments constitutifs est placé dans une boîte <div> générale ayant pour classe media-object.

Ensuite, une deuxième boîte sert de conteneur pour l’image, avec <div class= "media-object-section">. L’image est incluse dans une troisième boîte <div class= "thumbnail">. Puis nous avons l’élément <img>.

Le texte est placé dans une boîte <div> qui utilise la classe .media-object-section. Dans cette boîte, vous placez tout le contenu rédactionnel que vous souhaitez.

Voici le code utilisé dans cet exemple :

<div class="media-object"> 
  <div class="media-object-section"> 
     <div class="thumbnail"> 
        <img src= "loutre.jpg"> 
     </div> 
  </div>  ...