Problème avec l'avatar du dernier message.

[Naywayz]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : non défini
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

J'ai suivi le tuto concernant l'affichage de l'avatar du dernier posteur et j'ai remarqué que l'avatar affiché était comme "écrasé". J'ai tenté plusieurs solutions (notamment avec des aspect-ratio dans le CSS) mais rien n'y fait, il reste sempiternellement écrasé alors que, si je regarde les avatars des personnes ayant postés des messages dans les messages, ceux-ci apparaissent beaucoup plus nettement, sans être "écrasé" comme ceux qui s'affichent dans les catégories.

exemple:

Comment y remédier ?

Merci d'avance

[Naywayz]

Petit up

[Toryudo]

Bonjour,
Pour que ce soit plus facile, pourriez-vous fournir un (ou deux) lien accessible aux invités, où on pourrait avoir les deux visuels ?
Pour le premier, je peux le voir, mais le second, j'ai l'impression qu'aucune page n'est accessible pour ça.

[Naywayz]

Concernant le deuxième lien, il est là pour montrer que cela fonctionne sur les derniers messages (ils me conviennent, en soi). Ce sont ceux qui apparaissent sur le page principale du forum (catégories) qui me posent problème.

[Toryudo]

Alors, je vois que dans votre CSS, vous avez déjà une redéfinition de .lastpost-avatar et .lastpost-avatar img. Pour avoir le résultat attendu, il faudrait supprimer ces redéfinitions et les remplacer par celles-ci :

Code:

.lastpost-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  border: 2px solid #fff;
  border-radius: 50px;
  overflow: hidden;
  padding: 0 !important;
}

.lastpost-avatar img {
  position: absolute;
  height: initial !important;
  border: none !important;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

Ça prend en compte les règles par défaut et ça les remplaces par celles qu'on souhaite si nécessaire.

[Naywayz]

Cela n'y change rien, l'avatar reste ratatiné.

[Fallen Leaves]

Bonjour !

Essayez de rajouter dans la partie css de .lastpost-avatar img :

Code:

object-fit: cover;

[Naywayz]

Nope, toujours pas haha !

[Fallen Leaves]

Etrange parce que quand j'ajoute l'object-fit dans la console sur votre forum, cela fonctionne, l'avatar n'est plus écrasé

C'est bien le code mis en place dans votre css ?

Code:

.lastpost-avatar img {
width:38px;
height:38px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px
object-fit: cover;
}

[Toryudo]

Pouvez-vous copier votre CSS complet ici ?
Parce qu'effectivement, même constat que Fallen Leaves, je ne vois pas les modifications sur .lastpost-avatar img précisément.

[Naywayz]

Oui, quand je tape également dans le navigateur manuellement object-fit, il marche mais, pour une raison inconnue il ne semble pas la prendre en compte avec le CSS.

.lastpost-avatar {
position: relative;
width: 38px;
height: 38px;
border: 2px solid #fff;
border-radius: 50px;
overflow: hidden;
padding: 0 !important;
}
 
.lastpost-avatar img {
position: absolute;
height: initial !important;
border: none !important;
top: 50%;
left: 0;
transform: translateY(-50%);
object-fit:cover;
}

C'est ce que j'ai mis dans le CSS.

Code:

   n

[Toryudo]

Allez savoir pourquoi, il y a un caractère spécial qui empêche de bien interpréter la suite du CSS.
Du coup, remplacez le code par ceci (combinaison de ce que j'ai donné et du code de Fallen Leaves plus efficace que ce que j'avais proposé) et ça devrait passer :

Code:

.lastpost-avatar {
  width: 38px;
  height: 38px;
  border: 2px solid #fff;
  border-radius: 50px;
  overflow: hidden;
  padding: 0 !important;
}
.lastpost-avatar img {
  object-fit: cover;
}

[Naywayz]

Parfait, ça marche, merci beaucoup