Acte 1
Vous disposez d'une grille fluide réalisée avec float. Nous allons insérer dans cette grille une image.
Nous allons partir du code HTML suivant :
<div class="grille">
<div class="ligne">
<div class="col-8-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non quam nostram quidem, inquit Pomponius iocans; Tum Piso: Quoniam igitur aliquid omnes, quid Lucius noster? Duo Reges: constructio interrete. Nam quid possumus facere melius? Sint ista Graecorum; Cur id non ita fit? Non semper, inquam; Huius ego nunc auctoritatem sequens idem faciam. Proclivi currit oratio. Eodem modo is enim tibi nemo dabit, quod, expetendum sit, id esse laudabile. Si mala non sunt, iacet omnis ratio Peripateticorum.</p>
</div>
<div class="col-4-12 texture">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non quam nostram quidem, inquit Pomponius iocans; Tum Piso: Quoniam igitur aliquid omnes, quid Lucius noster? Duo Reges: constructio interrete. Nam quid possumus facere melius? Sint ista Graecorum; Cur id non ita fit? Non semper, inquam; Huius ego nunc auctoritatem sequens idem faciam. Proclivi currit oratio. Eodem modo is enim tibi nemo dabit, quod, expetendum sit, id esse laudabile. Si mala non sunt, iacet omnis ratio Peripateticorum.</p>
</div>
</div>
</div>Auquel nous allons ajouter le code nécessaire à la réalisation d'une grille fluide avec float : en CSS ou SCSS.
Faites en sorte d'insérer l'image suivante dans la colonne de droite, à la place du texte de substitution. L'image doit se redimensionner en même temps que la colonne pour être toujours visible et ne jamais déborder.
Il existe différentes manière d'insérer une image. N'hésitez pas à utiliser dès à présent la syntaxe figure [1] introduite par HTML5.
Proposition de solution (CSS) : un simple max-width devrait suffire à faire en sorte que l'ensemble de l'image s'affiche dans la largeur de la colonne, peu importe la situation.
figure img {
max-width: 100%;
}Acte 2
Le Directeur Artistique appelle et vous donne la consigne de ne pas redimensionner l'image. Le contenu pertinent étant déjà à gauche, il souhaiterait que l'image ne soit pas réduite mais plutôt coupée à droite.
Faites en sorte que la plus grande portion visible puisse tenir dans la colonne, sans que le contenu ne se redimensionne.
L'avantage d'utiliser la structure HTML5 figure / figcaption, c'est qu'elle met d'emblée en place un container pour l'image :
<figure>
<img src="/assets/kitty.jpg" alt="" />
<figcaption>Ceci est un chat</figcaption>
</figure>Il est donc possible d'utiliser ce container comme un masque, en partant du principe que l'image ne changera pas de taille mais que seule la portion située à l'intérieur du masque sera visible :
figure {
overflow: hidden;
}
figure img {
display:block;
max-width: auto;
}En revanche, cette approche pose un problème lors du redimensionnement, puis les padding du container (ici figure) ne sont pas pris en compte. Il faudrait donc idéalement ajouter un container supplémentaire entre la colonne et figure pour appliquer les padding nécessaires.
Acte 3
Le graphiste fournit une texture à appliquer en background de notre page, qui permet d'habiller nos deux colonnes :
Appliquez cette texture comme background centré de votre page. Quels sont les deux problèmes soulevés par cette image de background ?
L'inclusion d'un background centré est relativement simple, il s'agit de poser une image de background, à 50% de la référence horizontale et qui se répète sur la hauteur.
body {
background: #446CB3 url("/assets/texture900_bicolor.png") repeat-y 50% 0;
}Manifestement, ce background n'est pas utilisable pour des sites de plus de 900 pixels (la largeur du PNG). Au delà de cette taille, le fond apparait. De plus, le positionnement centré n'est pas efficace : plus on réduit la fenêtre en dessous de 900 pixels, moins le background sépare les colonnes de manière fidèle…
Acte 4
Afin de supporter les écrans de plus de 900 pixels, le graphiste renvoie une version dubackgroundde 3000 pixels de large. Modifiez votre code pour que lebackgroundsoit correctement posé, quelle que soit la largeur duviewportsous les 3000 pixels.
Le background est constitué de 2000 pixels correspondant à la colonne de gauche et 1000 pixels correspondant à la colonne de droite, soit 66.66% pour la gauche et 33.33% pour la droite. L'astuce est de positionner le background par rapport à cette verticale de séparation, pas par rapport au centre de la page.
body {
background: #446CB3 url("/assets/texture900_bicolor.png") repeat-y 66.66% 0;
}Vous trouverez ici une solution complète : voir la démo.