5. Recadrer l'image sans la déformer
Tu assembles la landing PulsaConf comme un systeme responsive complet. Remplis le cadre avec une image proportionnelle, en acceptant un recadrage contrôlé plutôt qu'un étirement. Applique ce choix à .landing, puis vérifie que variables, grille, medias, container queries et overflow racontent la même strategie.
Objectifs de la leçon
- Implémenter 5. Recadrer l'image sans la déformer sans perdre le scenario PulsaConf.
- Relier object-fit au risque : des règles isolees peuvent passer seules mais echouer ensemble sur contenu reel.
- Prouver que variables, grille, medias, container queries et overflow racontent la même strategie.
Intention
Tu assembles la landing PulsaConf comme un systeme responsive complet. Remplis le cadre avec une image proportionnelle, en acceptant un recadrage contrôlé plutôt qu'un étirement. Applique ce choix à .landing, puis vérifie que variables, grille, medias, container queries et overflow racontent la même strategie.
object-fit doit repondre à une contrainte visible, pas décorer au hasard.
Méthode
Cible .landing, ajoute une declaration utile, puis inspecte la règle active.
Le risque a éviter est : des règles isolees peuvent passer seules mais echouer ensemble sur contenu reel.
Validation
5. Recadrer l'image sans la déformer est termine quand les tests passent et que variables, grille, medias, container queries et overflow racontent la même strategie.
Relis aussi le focus, les textes longs et le petit écran.
Vocabulaire lié
- object-fit — Propriété ou motif CSS valide dans cette étape.
- .landing — Sélecteur cible pour limiter les effets de bord.
- responsive — Capacité à rester utilisable selon les contraintes d'écran et de contenu.
Validation
- Je sais appliquer object-fit.
- Je prouve que variables, grille, medias, container queries et overflow racontent la même strategie.
- Je peux expliquer le choix.