Contrôler le rendu des images

Une image peut avoir les bonnes dimensions et pourtant être mal cadrée dans une carte : le sujet paraît trop petit ou une partie importante du paysage disparaît. Dans cette leçon, vous vérifiez le rendu actuel, puis vous découvrez le mode de remplissage et le cadrage CSS pour choisir une solution adaptée au catalogue.

Vérifier le rendu avec les dimensions intrinsèques

Vos pages utilisent déjà `next/image` avec `src`, `alt`, `width` et `height`. Ce mode communique à Next.js les dimensions intrinsèques du fichier et réserve une proportion cohérente pour l’image. Pour le catalogue, les valeurs prévues sont 1200 × 800 : vérifiez qu’elles correspondent bien aux deux fichiers, faute de quoi la proportion affichée ne reflétera pas le visuel réel.

Lancez le serveur avec `npm run dev`, puis ouvrez la page d’accueil et une page de détail. Regardez si les images gardent leurs proportions, si elles restent lisibles dans leur espace et si le sujet principal demeure visible. Cette vérification porte sur le rendu visuel ; les données d’image et leurs chemins ont été préparés dans les leçons précédentes.

Remplir une zone avec `fill`

La propriété `fill` convient lorsque vous voulez que l’image occupe la zone de son parent, plutôt que de lui donner une largeur et une hauteur intrinsèques dans le composant. Avec ce mode, vous retirez `width` et `height` de `` et vous ajoutez `fill`. Le parent doit toutefois avoir une position CSS qui établit le cadre de l’image et une taille définie ; sans cela, le remplissage n’a pas de zone fiable à occuper.

Dans le contrat du catalogue, vous pouvez réutiliser la classe autorisée `sentier-image` sur ce conteneur, à condition de placer `` à l’intérieur et d’adapter la règle CSS de cette classe. Le parent reçoit une position `relative` et une proportion, par exemple 3/2, pour matérialiser une zone. L’image reçoit `object-fit: cover` par la même classe ou par une classe déjà prévue dans votre feuille de style ; aucun style inline n’est nécessaire.

Cadrer sans déformer

`object-fit: cover` remplit la zone en conservant les proportions de la photo ; une partie de l’image peut donc être recadrée. À l’inverse, `object-fit: contain` conserve l’image entière, mais peut laisser des espaces libres dans la zone. Le choix dépend du contenu : un paysage supporte souvent mieux un recadrage qu’un sujet placé près du bord.

Appliquez le cadrage au moyen d’une règle CSS associée à une classe existante, sans ajouter de classe au contrat ni de style inline. Après chaque ajustement, contrôlez les deux visuels sur la page d’accueil et le détail : le même cadrage peut convenir à la forêt mais couper un sommet ou un élément important sur la photo de montagne. Si le recadrage nuit à la compréhension, gardez les dimensions intrinsèques au lieu d’imposer `cover`.

Choisir le mode adapté au catalogue

Le mode actuel avec `width` et `height` est un choix valable pour afficher les images selon leur proportion naturelle. `fill` devient utile si vous avez décidé qu’une zone de dimensions définies doit être entièrement occupée, par exemple pour uniformiser des vignettes. Il impose alors une structure parent-enfant et une règle CSS qui ne sont pas présentes dans le squelette actuel ; ne le basculez donc pas sans adapter consciemment le balisage et le style autorisé.

À retenir

Dans la prochaine leçon, vous assemblerez la page d’accueil complète et vérifierez la cohérence de la liste des itinéraires.