Images responsive CSS
Les media queries ont remodelé le layout quand le viewport change. Les images sont un autre point de tension : un fichier de 4000px dans une colonne étroite déborde, gaspille la bande passante ou fait sauter la page au chargement. Cette leçon couvre CSS fluide, réserver l’espace et sources plus malines — sans répéter la syntaxe @media de la session précédente.
Boîte à outils images responsive
📊 Images responsive en un coup d’œil
| Élément | Rôle au quotidien |
|---|---|
max-width: 100% + height: auto |
L’image rétrécit dans la colonne ; le ratio reste |
width / height sur <img> ou aspect-ratio en CSS |
Réserve la place ; moins de CLS |
srcset + sizes |
Le navigateur choisit un fichier proche de la largeur affichée |
<picture> + <source media> |
Art direction — recadrage ou asset selon la condition |
object-fit + boîte fixe |
Rogner ou letterbox dans un cadre connu (leçon Object Fit) |
| Media queries sur le layout | Déplacent colonnes et nav — l’image suit la largeur du slot |
Deux couches : largeur de layout (conteneur, grid, media queries) et comportement image (échelle CSS + fichier téléchargé). Corrigez le débordement en CSS ; ajoutez srcset quand le même visuel a besoin de fichiers plus légers sur mobile.
Image fluide — max-width et height: auto
L’habitude classique : ne jamais dépasser le conteneur ni déformer la hauteur.
.article img {
max-width: 100%;
height: auto;
display: block;
}
Évitez width: 100% seul sur d’énormes images intrinsèques sans max-width. Associez règles fluides et srcset raisonnable.
Réserver l’espace — dimensions et aspect-ratio
Si le navigateur connaît tôt largeur et hauteur, le contenu en dessous saute moins.
.hero__photo {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
Pour des photos de contenu entièrement visibles, préférez max-width fluide sans cover forcé. aspect-ratio + cover quand le design exige un cadre fixe.
Changement de résolution — srcset et sizes
srcset liste les candidats ; sizes indique la largeur affichée dans le layout. Le navigateur choisit — pas un @media par largeur de PNG.
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(min-width: 48rem) 640px, 100vw"
alt="Team at a whiteboard"
width="800"
height="450"
/>
Gardez sizes honnête selon votre CSS réel.
Art direction avec <picture>
Quand le recadrage doit changer — hero portrait sur mobile, bannière large sur desktop.
<picture>
<source media="(max-width: 40rem)" srcset="hero-portrait.jpg" />
<source media="(min-width: 41rem)" srcset="hero-landscape.jpg" />
<img src="hero-landscape.jpg" alt="City skyline at dusk" width="1200" height="675" />
</picture>
picture pour l’art direction, pas pour dupliquer cinquante breakpoints. Souvent srcset suffit si seule la résolution change.
Cadres fixes — rappel object-fit
Photos fluides : max-width. Cartes à hauteur égale : boîte dimensionnée + object-fit: cover.
.card__thumb {
width: 100%;
height: 12rem;
object-fit: cover;
display: block;
}
Travailler avec les media queries
Les queries changent colonnes et sidebar ; les images héritent la largeur du slot. Mettez sizes à jour quand un breakpoint change l’affichage.
À vous
<img>large en colonne étroite —max-width: 100%,height: auto.aspect-ratiosur un hero.srcsetà trois largeurs +sizesréaliste.<picture>à deux recadrages.- Vignette hauteur fixe +
object-fit: cover.
Erreurs fréquentes
- Gros
srcseul sanssrcset width: 100%sansheight: autosizes="100vw"partout alors que CSS affiche 320pxobject-fitsans boîte limitée- Réenseigner
@mediaici au lieu de lier slot etsizes
Résumé
- CSS fluide garde les images dans les colonnes responsive
- Dimensions ou
aspect-ratiolimitent le saut de layout srcset/sizespour quel fichier ;<picture>pour art directionobject-fitpour cadres fixes- Suite : Breakpoints — stratégie de queries sur la page
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut