Maîtriser la largeur du site et de son image
Objectif de la leçon
Comprendre width, max-width et box-sizing, centrer une largeur maximale commune et rendre ordinateur.jpg adaptable sans supprimer son texte alternatif.
Explications
Un même cadre de lecture sur les trois pages
Nous allons limiter la largeur des grandes zones header, main et footer, tout en les laissant rétrécir. Nous allons aussi empêcher ordinateur.jpg de dépasser son espace dans l’accueil.
Ouvrez styles.css. Aucun contenu HTML n’est remplacé.
1. Ce que mesure une largeur
width indique une largeur. Pour une boîte ordinaire utilisant le modèle content-box, width mesure le contenu : padding et bordures s’ajoutent autour.
Sur une note avec width: 20rem;, padding: 1rem; et deux bordures de 0.125rem, la largeur jusqu’aux bords extérieurs vaut 20 + 1 + 1 + 0,125 + 0,125 = 22,25rem. Les marges ne sont pas incluses.
Ne recopiez pas une largeur fixe sur toutes les notes : ce calcul sert à comprendre le modèle de boîte avant de choisir un réglage souple.
2. Inclure padding et bordures
Avec box-sizing: border-box, la largeur déclarée inclut le padding et les bordures. Dans l’exemple de 20rem, le contenu dispose donc de moins de place à l’intérieur, mais la boîte mesure 20rem jusqu’à sa bordure.
Nous appliquerons ce modèle aux éléments du petit site avec le sélecteur universel * :
* {
box-sizing: border-box;
}
L’astérisque cible tous les éléments. Il ne crée pas d’éléments et ne modifie pas leurs noms. Les marges restent extérieures, même avec border-box. Ce réglage n’empêche pas à lui seul un contenu trop large de déborder.
3. Une largeur maximale, pas une largeur rigide
width: 100%; demande ici la largeur disponible dans le conteneur. max-width: 60rem; fixe ensuite un plafond : la boîte peut être plus petite, mais ne doit pas s’étirer au-delà de cette limite dans notre mise en page.
margin-left: auto; et margin-right: auto; partagent l’espace restant à gauche et à droite lorsque la boîte est moins large que son conteneur. Elle se centre alors ; sur une petite largeur, elle garde simplement l’espace disponible.
Ajoutez :
header, main, footer {
width: 100%;
max-width: 60rem;
margin-left: auto;
margin-right: auto;
}
Le padding de body ménage toujours 1rem de chaque côté de la page. Ne rajoutez pas de largeur fixe de 60rem : cela empêcherait le cadre de suivre une petite fenêtre.
4. Adapter l’image déjà présente
La balise img de Mon espace de travail charge toujours ordinateur.jpg. Ajoutez :
img {
max-width: 100%;
height: auto;
}
max-width: 100%; limite l’image à la largeur de son conteneur. height: auto; laisse sa hauteur suivre ses proportions. Sans width: 100%; imposé, une petite image n’est pas systématiquement agrandie jusqu’à remplir la page.
Gardez src et le texte alternatif adapté à votre image. CSS ne peut pas fabriquer une image manquante.
5. Faire les vérifications
Réduisez la fenêtre de l’accueil et vérifiez que l’image peut rétrécir. Ouvrez les deux autres pages : header, main et footer utilisent le même cadre de lecture.
Il reste normal que le tableau ou certains champs aient besoin d’une attention particulière sur des espaces très petits ; nous les vérifierons dans le chapitre responsive. Ne cachez pas un débordement avec une règle qui masque le contenu.
Le prochain chapitre expliquera d’où viennent les valeurs lorsqu’un élément reçoit plusieurs règles ou une valeur transmise par son parent.
Exemple commenté
Ces nouvelles règles s’ajoutent au site :
* {
box-sizing: border-box;
}
header, main, footer {
width: 100%;
max-width: 60rem;
margin-left: auto;
margin-right: auto;
}
img {
max-width: 100%;
height: auto;
}
La balise d’image ne change pas :
<img src="ordinateur.jpg" alt="Ordinateur portable ouvert sur un éditeur de code">Exercice à réaliser
Étape 1
Ajoutez * { box-sizing: border-box; } dans styles.css.
Étape 2
Ajoutez la règle commune header, main, footer avec width, max-width et les deux marges automatiques.
Étape 3
Ajoutez la règle img avec max-width: 100%; et height: auto;. Ne remplacez ni src ni alt.
Étape 4
Réduisez la fenêtre puis vérifiez les trois pages. Sur une grande largeur, contrôlez que leurs grandes zones partagent le même plafond.
Étape 5
Expliquez la différence entre width: 60rem; et max-width: 60rem;, puis reprenez le calcul de la note de 20rem.
Correction et résultat attendu
* {
box-sizing: border-box;
}
header, main, footer {
width: 100%;
max-width: 60rem;
margin-left: auto;
margin-right: auto;
}
img {
max-width: 100%;
height: auto;
}
Avec content-box, l’exemple de note mesure 22,25rem jusqu’à la bordure ; avec border-box, 20rem. La marge reste à l’extérieur. Notre solution réelle n’impose pas cette largeur aux notes : elle donne aux grandes zones 100% avec un maximum de 60rem et protège les proportions de l’image.
À retenir
Width et max-width ont des rôles différents. Border-box inclut padding et bordures dans les dimensions déclarées. L’image du cours HTML peut rétrécir sans perdre son alternative ni changer de proportions.
Seuil de réussite, en pourcentage : 100 %. QCM obligatoire pour terminer le cours.