Apparence de l'avatar sur la page d'accueil

[Laférosse]

Bonjour, j'ai remarqué depuis quelque temps, que, peu importe la forme de l'image et son format, la qualité de l'image des avatars est dégradée visuellement sur la page d'accueil. Les contours apparaissent comme mal définis. J'ai bien sur, essayé de changer plusieurs fois d'image, le rendu est toujours de mauvaise qualité. Je précise qu'à la base mon image est d'une taille assez grande, non pixellisée...Est-ce un bug ? Merci d'avance.

[chattigre]

Bonjour,

C'est normal, puisque vous forcez les avatars à être carrés (48*48) alors qu'ils ne le sont pas forcément.
C'est cette règle :

Code:

.forum-content .avatar-default img {
   width: 48px !important;
   height: 48px !important;
   border-width: 2px;
   border-style: solid;
   border-color: #fff;
   border-radius: px;
   height: auto;
   width: auto;
   max-width: 200px;
   max-height: 300px;
   background-color: #C3DEDA;
}

Dans cette règle, supprimez

Code:

height: 48px !important;

et ajoutez soit (Option 1)

Code:

  object-fit: cover;
  aspect-ratio: 1/1;

soit (Option 2)

Code:

  object-fit: contain;
  aspect-ratio: 1/1;

Dans les 2 cas, ça ne déformera plus l'avatar.
Option 1 : Les parties qui "débordent" d'un format carré seront masquées.
Option 2 : L'image sera potentiellement plus petite sur une dimension visuellement, mais occupera la même place sur la page (48*48) avec du blanc si nécessaire au lieu de se trouver déformée.

Bonne journée
Cordialement

[Laférosse]

Merci. Cela fonctionne avec le 2ème code (contain). Juste pour précision. Que l'avatar soit carré ou rectangulaire, avec ce code cela adaptera toujours mon image ?

[chattigre]

Re,

Avec votre code précédent, l'image était adaptée par déformation : Donc, perte de qualité, de précision, flou, ou appelez ça comme vous voulez

Avec cover, la priorité est le contenant : Il est entièrement rempli par l'image, mais elle n'est pas déformée : Les bouts en trop sont donc masqués.
Avec contain, l'image est adaptée de sorte à remplir une dimension du conteneur, mais à ne pas être déformée non plus : La priorité est l'image qui est alors affichée en entier, quitte à ce qu'il y ait du vide dans le conteneur.

Bonne journée

[Laférosse]

Merci beaucoup pour les explications. Belle soirée à vous.