Images adaptatives
Empeche les medias de deborder avec max-width, aspect-ratio et object-fit.
Objectifs de la leçon
- Comprendre Images adaptatives.
- Modifier .card img sans casser le mobile.
- Verifier le résultat à plusieurs tailles.
Objectif
Empeche les medias de deborder avec max-width, aspect-ratio et object-fit.
Le responsive se prouve avec plusieurs largeurs, pas avec une capture unique.
Méthode
Travaille d'abord sur .card img, puis elargis seulement si le rendu le justifié.
Une bonne règle responsive protege le contenu sans figer la mise en page.
Validation
Teste petit écran, desktop et contenu long.
Reduis les animations si l'utilisateur le demandé.
Vocabulaire lié
- .card img — Zone ciblée pour garder l'exercice précis.
- max-width — Contrainte responsive à vérifier.
- viewport — Largeur disponible qui influence le rendu.
Validation
- Je teste à plusieurs largeurs.
- Je protege les contenus longs.
- Je peux expliquer le breakpoint.