Toute la photo, ou toute la boîte ?

🎯 Objectif

Adapter une grande image à sa boîte avec background-size et ses deux mots-clés, cover et contain.

📖 Exemple

La vignette d'un sentier de randonnée affiche une photo de forêt en entier — le code, et ce que le navigateur en fait :

<div class="vignette">
    <p>Forêt du Jura</p>
</div>

.vignette {
    height: 160px;
    padding: 8px 16px;
    background-color: #fde7c4;
    background-image: url("/images/fonds/foret.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

La photo mesure 1200 pixels sur 800. Sans réglage, elle garderait cette taille, et la vignette n'en montrerait qu'un coin de ciel. La propriété background-size l'adapte à la boîte, sans jamais la déformer :

• contain — la photo entière tient dans la boîte. Rien n'est coupé, mais il reste des bandes vides sur les côtés. Ici, la couleur de fond les remplit, assortie au ciel.
• cover — la photo couvre toute la boîte. Plus aucun vide, mais ce qui dépasse est rogné.

Avec contain, une seule image ne remplit pas la boîte : sans no-repeat, la photo se répéterait dans les bandes vides.

📝 Consigne

L'affiche de la sortie au lac est en hauteur, la photo en largeur. Pour l'instant, on n'en voit qu'un coin de ciel.

Dans la règle de la classe affiche, ajoute deux déclarations :

1. La taille qui fait couvrir toute l'affiche par la photo, quitte à la rogner
2. Puis la position qui centre la photo, pour que le voilier, au milieu de l'image, reste dans le cadre