179
Mise en page
Si.l’image.doit.se.trouver.dans.la.page.sous.forme.d’élément.img,.essayez.de.fixer.la.largeur.de.l’élément.conteneur.à.100 %.et.attribuez.la.valeur.hidden.à.la.propriété.overflow..
L’image.sera.détourée.du.côté.droit.de.manière.à.tenir.à.l’intérieur.de.l’élément.branding,.
mais.elle.se.mettra.à.l’échelle.en.même.temps.que.la.mise.en.page :
#branding {
width: 100%;
overflow: hidden;
}

Pour. les. images. normales. de. contenu,. vous. voudrez. sans. doute. qu’elles. se. redimensionnent.verticalement.et.horizontalement,.afin.d’éviter.tout.détourage..Vous.pouvez.le.faire.en.
ajoutant.un.élément.img.à.la.page.sans.en.spécifier.les.dimensions..Ensuite,.définissez.la.
largeur.en.pourcentage.de.l’image.et.ajoutez.un.paramètre.max-width.de.la.même.taille.que.
l’image.pour.éviter.la.pixellisation..
Par.exemple,.supposons.que.vous.souhaitiez.créer.un.style.d’articles.d’actualités.avec.une.
colonne.d’image.étroite.à.gauche.et.une.colonne.de.texte.plus.large.à.droite..L’image.doit.
faire.approximativement.le.quart.de.la.largeur.de.la.boîte.conteneur,.le.texte.prenant.le.reste.
de.la.place..Vous.pouvez.le.faire.en.fixant.la.largeur.de.l’image.à.25 %.et.en.définissant.une.
valeur.max-width.égale.à.la.taille.de.l’image,.soit.ici.200 pixels.de.large :
.news img {
width: 25%;
max-width: 200px;
float: left;
display: inline;
padding: 2%;
}
.news p {
width: 68%;
float: right;
display: inline;
padding: 2% 2% 2% 0;
}
Lorsque.l’élément.news.s’étend.ou.se.contracte,.l’image.et.les.paragraphes.s’étendent.ou.
se.contractent.également,.en.conservant.leur.équilibre.visuel.(voir.Figure 8.13)..Dans.les.
navigateurs.compatibles.avec.les.standards,.l’image.ne.dépasse.cependant.jamais.sa.taille.
actuelle..