Changer la dimension de l'avatar sans defformer la version mobile - AwesomeBB

[Kam27]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://garreg-mach.forumactif.com/

Description du problème

Bonjour,

Comment on peut changer les dimensions de notre avatar tout en restant 36x36px dans la version mobile ?
J'ai tenté avec ce code mais quand on passe sur la version mobile notre avatar ne se réduit pas.

Code:

.avatar-big img {
    border-radius: 0px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.11), 0 0 1px rgba(0,0,0,0.22);
    display: inline-block;
    max-height: 250px;
    max-width: 250px;
  height: auto;
  width: auto;
}

[chattigre]

Bonjour
Essayez ce code CSS pour ne toucher que les écrans larges :

Code:

@media (min-width: 961px) {
  .avatar-big img {
    height: 250px;
    width: auto;
  }
}

L'avatar ne sera agrandi à 250px de haut que si l'écran fait plus de 960px de large.
Il est préférable de préciser width: auto pour éviter une déformation de l'image
Si vos images ont une ratio largeur:hauteur identique, vous pouvez préciser les deux paramètres en valeurs chiffrées.

Bonne journée
PS : Lorsque vous modifiez le CSS d'un élément, inutile de repréciser les propriétés non touchées. Ici, inutile de rajouter la propriété box-shadow si elle est inchangée par rapport au CSS de base. Cela n'est pas forcément valable pour les dimensions...

[Kam27]

Merci