Aller au contenu principal

16-4 Afficher l'image sous forme de pastille

Pour restreindre la taille de l'image, il existe plusieurs méthodes.

Une de ces méthodes est d'utiliser une feuille de style avec quelques règles CSS préétablis pour les images de profil, les avatars et autres images de ce genre. On vient ainsi restreinte la dimension et ensuite positionner au centre l'image, sans la déformer.

Je vous propose d'utiliser bootstrap-avatar (https://github.com/getmindspun/bootstrap-avatar) pour ce besoin. Il s'agit d'une feuille de style SCSS contenant plusieurs définitions de taille pour les images de type avatar. Ce CSS vous sera aussi probablement utile dans le cadre de votre projet.

Ajouter la feuille de style _avatar​

  1. Créez une nouvelle feuille de style _avatar.scss sous votre dossier styles.
  2. Mettez-y le contenu suivant:
    src/styles/_avatar.scss
    $avatar-sizes: 16, 24, 32, 48, 64, 96, 128 !default;

    @mixin avatar($size) {
      height: $size + px;
      width: $size + px;
      font-size: round(($size / 3) * 2) + px;
      line-height: $size + px;
    }

    .avatar {
      position: relative;
      display: inline-flex;
      object-fit: cover;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      margin: 0;
      padding: 0;
      text-align: center;
      text-transform: uppercase;
      font-weight: normal;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;

      &.img-thumbnail {
        padding: 4px;
        max-width: none;
      }

      & > * {
        height: 100%;
        width: 100%;
      }

      @include avatar(32);
    }

    @each $breakpoint in map-keys($grid-breakpoints) {
      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

      @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
        @each $size in $avatar-sizes {
          .avatar#{$infix}-#{$size} {
            @include avatar($size);
          }
        }
      }
    }

Importer la feuille de style​

Dans votre fichier styles.scss, ajoutez une instruction d'importation, à la fin pour le nouveau fichier.

src/styles.scss
/* You can add global styles to this file, and also import other style files */

/* Variables SCSS */
@import 'styles/variables';

/* Importing Bootstrap SCSS file. */
@import 'bootstrap/scss/bootstrap';
@import 'styles/avatar';

Utiliser la classe CSS avatar​

La feuille de style expose essentiellement une classe avatar donnant le visuel de base. On peut ensuite appliquer une seconde classe pour modifier la taille, tel que avatar-96 pour une image de 96px.

Les tailles de base fournies sont les suivantes: $avatar-sizes: 16, 24, 32, 48, 64, 96, 128 !default;

Pour la documentation complète, vous pouvez visiter l'adresse suivante: https://github.com/getmindspun/bootstrap-avatar

src/app/pages/projets/components/projets-liste.component.ts
<!-- ... -->

<img src="{{projet.image ? projet.image[0].url : '/images/default-image.png'}}"
      class="avatar avatar-96 rounded-3"
      alt="Image du projet" />

<!-- ... -->
http://localhost:4200