Portfolio : CSS grid (recadrer des images dans la grille)

25/5/2021 ☼ grid ☼ grille ☼ portfolio ☼ image

Niveau : ★★★☆☆

Cours Projet Web 2020-21. Voici les exemples à étudier et modifier. Les commentaires dans le code permettent de suivre les différentes étapes.

Le site de Jens Simmons est une excellente ressource pour continuer à travailler avec CCS Grid.

1 - Le résultat dans la page

⟶ Voir l’exemple en pleine page

See the Pen Cropping Images by Nicolas Tilly (@nicolastilly) on CodePen.

Dans cet exercice il s’agit de travailler avec les images de façon à pouvoir les recadrer en fonction de l’espace des différentes cellules de la grille. Nous avons donc ici deux cellules de 300x300px dans la première ligne, et une cellule dans de 300x600px dans la seconde ligne. La propiété CSS object-fit: cover; permet ainsi de respecter le ratio original de l’image et de remplir tout l’espace disponible dans les cellules.

⟶ Ressource

2 - Le code html

<section>

<div id="container">

    <div class="bloc1"><img id="crop" src="https://picsum.photos/800/800?random=1"></div>
    <div class="bloc2"><img id="crop" src="https://picsum.photos/800/800?random=2"></div>
    <div class="bloc3"><img id="crop2" src="https://picsum.photos/800/800?random=3"></div>
    <div class="bloc4"></div>

</div>
    
</section>

3 - Le code CSS

section {
    display:flex;
    width:100%;
    height:100vh;
}

#container {
    margin:auto;
    display:grid;
    grid-template-columns: 300px 300px;
    grid-template-rows: 300px 300px;
    grid-template-areas:
        "cellule1 cellule2"
        "cellule3 cellule3";
}

.bloc1 {
    grid-area: cellule1;
}

.bloc2 {
    grid-area: cellule2;
}

.bloc3 {
    grid-area: cellule3;
}

.bloc4 {
    grid-area: cellule4;
}
/*ici la cellule fait 300x300px, elle est présente deux fois dans la 1ère ligne de la grille*/
#crop {
    width:300px;
    height:300px;
    object-fit: cover;
}
/*ici la cellule fait 300x600px, elle est présente une fois dans la 2ème ligne de la grille*/
#crop2 {
    width:600px;
    height:300px;
    object-fit: cover;
}