Images et médias responsives

Un site responsive n'est pas seulement une question de colonnes. Les médias doivent aussi s'adapter proprement.

Image fluide de base

img {
  max-width: 100%;
  height: auto;
  display: block;
}

Contrôler le cadrage avec object-fit

.thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Éviter le layout shift

Réserve l'espace en utilisant width et height dans le HTML, ou aspect-ratio côté CSS.

Vidéo responsive

.video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

A retenir

Des médias bien gérés améliorent :

• l'esthétique
• la performance perçue
• la stabilité visuelle au chargement

Mini pratique

Intègre une galerie de 6 images. Assure-toi qu'elles gardent un cadrage propre sur mobile et desktop.

Erreurs fréquentes

• appliquer des valeurs sans vérifier l'impact sur mobile
• surcharger la feuille de style au lieu de simplifier les sélecteurs
• corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

• la règle est-elle lisible et cohérente avec le reste du module ?
• le rendu reste-t-il correct sur petit écran ?
• la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.