Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Objets avec média
Le motifMedia Object (« objet média ») est un modèle que l'on retrouve partout sur le Web. Il s'agit d'une boîte à deux colonnes avec une image d'un côté et un texte descriptif de l'autre, par exemple dans une publication sur un réseau social.
Exigences
Le motif objet média doit présenter tout ou partie des caractéristiques suivantes :
- Empilé sur mobile, deux colonnes sur ordinateur.
- L'image peut être à gauche ou à droite.
- L'image peut être petite ou grande.
- Les objets média peuvent être imbriqués.
- L'objet média doit gérer le contenu quel que soit le côté le plus haut.
Recette
Cliquez sur « Exécuter » dans les blocs de code ci-dessous pour modifier l'exemple dans le MDN Playground :
<div> <div> <img src="https://mdn.github.io/shared-assets/images/examples/balloons_square.jpg" alt="Ballons" /> </div> <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum. </p> </div> <div>Un pied de page optionnel peut être ajouté ici.</div></div><div> <div> <img src="https://mdn.github.io/shared-assets/images/examples/sharp-account_box-24px.svg" width="80px" alt="Compte" /> </div> <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum. </p> </div> <div></div></div><div> <div> <img src="https://mdn.github.io/shared-assets/images/examples/balloons_square.jpg" alt="Ballons" /> </div> <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum. </p> </div> <div>Un pied de page optionnel peut être ajouté ici.</div></div><div> <a> <img src="https://mdn.github.io/shared-assets/images/examples/balloons_square.jpg" alt="Ballons" /> </a> <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum. </p> </div> <div></div> <div> <a> <img src="https://mdn.github.io/shared-assets/images/examples/balloons_square.jpg" alt="Ballons" /> </a> <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. </p> </div> <div></div> </div></div>body { font: 1.2em sans-serif;}img { max-width: 100%;}p { margin: 0 0 1em 0;}@media (width >= 500px) { .media { display: grid; grid-template-columns: fit-content(200px) 1fr; grid-template-rows: 1fr auto; grid-template-areas: "image content" "image footer"; grid-gap: 20px; margin-bottom: 4em; } .media-flip { grid-template-columns: 1fr fit-content(250px); grid-template-areas: "content image" "footer image"; } .img { grid-area: image; } .content { grid-area: content; } .footer { grid-area: footer; }}Choix effectués
J'ai choisi d'utiliser lamise en page par grille pour l'objet média, car elle permet de contrôler la disposition sur deux axes lorsque c'est nécessaire. Ainsi, lorsqu'il y a un pied de page avec un contenu court au-dessus, le pied de page peut être repoussé en bas de l'objet média.
Une autre raison d'utiliser la grille est de pouvoir utiliserfit-content pour la taille de la piste de l'image. En utilisantfit-content avec une taille maximale de 200 pixels, lorsqu'on a une petite image comme l'icône, la piste ne prend que la taille de cette image — la taillemax-content. Si l'image est plus grande, la piste s'arrête à 200 pixels et comme l'image a unmax-width de 100 % appliqué, elle est réduite pour continuer à tenir dans la colonne.
En utilisantgrid-template-areas pour réaliser la disposition, on visualise le motif dans le CSS. Je définis la grille dès que la zone d'affichage (viewport en anglais) atteint 500 pixels de large, donc sur les petits appareils, l'objet média s'empile.
Une option pour ce motif est de l'inverser pour placer l'image de l'autre côté : cela se fait en ajoutant la classemedia-flip, qui définit un modèle de grille inversé et provoque le miroir de la disposition.
Quand on imbrique un objet média dans un autre, il faut le placer dans la deuxième piste dans la disposition normale, et dans la première piste quand le motif est inversé.