---
title: Objets avec média
slug: Web/CSS/Layout_cookbook/Media_objects
tags:
  - CSS
  - Guide
  - Recette
translation_of: Web/CSS/Layout_cookbook/Media_objects
---
<div>{{CSSRef}}</div>

<p class="summary">Le motif <em>Media Object</em> (qu'on peut traduire en « objet avec média ») est un motif qu'on rencontre fréquemment sur le Web. <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">Intitulé ainsi par Nicole Sullivan</a>, cela fait référence à une boîte organisée en deux colonnes dont l'une contient une image d'un côté et un texte descriptif de l'autre (par exemple l'image de profil de quelqu'un à gauche et un billet à droite).</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16112/media-object.png"></p>

<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>

<p>Voici ce qu'on souhaite obtenir :</p>

<ul>
 <li>Un empilement des deux zones sur mobile et deux colonnes sur ordinateur</li>
 <li>L'image peut être à gauche ou à droite</li>
 <li>L'image peut être petite ou grande</li>
 <li>Les objets avec média peuvent être imbriqués</li>
 <li>L'objet avec média devrait dégager l'espace pour le contenu, quel que soit le côté le plus grand.</li>
</ul>

<h2 id="Recette">Recette</h2>

<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p>

<div class="note">
<p class="codepen"><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">Télécharger cet exemple</a>.</p>
</div>

<h2 id="Choix_effectués">Choix effectués</h2>

<p>On a ici choisi d'utiliser <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">une grille</a> pour réaliser cet objet. cela permet de contrôler les deux dimensions lorsqu'on en a besoin. Ainsi, si on a besoin d'un pied de page avec un contenu au dessus, le pied de page peut être poussé sous l'objet.</p>

<p>La grille permet également d'utiliser {{cssxref("fit-content")}} pour la piste contenant l'image. En utilisant <code>fit-content</code> avec une taille maximale de 200 pixels, lorsqu'on a une petite image (une icône), la piste est réduite à la taille de cette image. Si l'image est plus grande, la piste ne sera pas plus large que 200 pixels, de plus, l'image ayant {{cssxref("max-width ")}} avec 100%, elle sera redimensionnée afin de pouvoir tenir dans la colonne.</p>

<p>En utilisant {{cssxref("grid-template-areas")}} pour dessiner la disposition, on peut voir le motif dans la feuille de style CSS. La grille est définie lorsqu'on a <code>max-width</code> qui vaut au moins 500 pixels et on a donc un empilement pour les plus petits écrans.</p>

<p>En ajoutant une classe <code>media-flip</code>, on fournit une disposition alternative qui permet de changer le côté sur lequel l'image est affichée.</p>

<p>Lorsqu'on imbrique un objet dans un autre, il faut le placer dans la deuxième piste en mode normal et sur la première lorsqu'on choisit d'inverser le côté de l'image.</p>

<h2 id="Méthodes_alternatives">Méthodes alternatives</h2>

<p>Il existe différentes méthodes alternatives permettant d'obtenir ce résultat selon les navigateurs que vous souhaitez prendre en charge. Une méthode assez générique consiste à placer l'image en flottante à gauche et d'ajouter un dégagement sur la boîte afin qu'elle contienne bien tous les éléments flottants.</p>

<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p>

<div class="note">
<p class="codepen"><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">Télécharger cet exemple</a>.</p>
</div>

<p>Une fois que les éléments flottants sont des éléments de grille, les dégagements ne s'appliquent plus et il n'est donc pas nécessaire de retirer quoi que ce soit sur les dégagements.</p>

<p>En revanche, il faudra retirer les marges appliquées aux objets et les largeurs superflues pour la grille (la propriété {{cssxref("gap")}} permet de contrôler l'espace entre et les pistes gèrent le reste du dimensionnement).</p>

<ul>
</ul>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>

<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>

<h3 id="grid-template-areas">grid-template-areas</h3>

<p>{{Compat("css.properties.grid-template-areas")}}</p>

<h3 id="float">float</h3>

<p>{{Compat("css.properties.float")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS</a></li>
 <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive">L'amélioration progressive et les grilles CSS</a></li>
 <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Utiliser les zones nommées des grilles</a></li>
 <li><code><a href="/fr/docs/Web/CSS/fit-content">fit-content</a></code></li>
 <li><code><a href="/fr/docs/Web/CSS/grid-template-areas">grid-template-areas</a></code></li>
</ul>

<p> </p>