Redimensionner image dans profil/message

[Melodiam]

Détails techniques

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

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 20/05/2016
Lien du forum : http://zootopia.forumactif.org/

Description du problème

Bonjour !

Voilà, j'ai un petit souci avec le profil d'utilisateur dans la partie message ! Comme vous pouvez le voir sur la capture d'écran, la petite image (un gif en l'occurence chez Archibald) déborde carrément du cadre...

J'aimerais savoir comment faire en sorte qu'elle se redimensionne toute seule dans le profil ? S'il y a un code ou une technique ?

Voici le CSS de mon code profil ->

Code:

/*****AFFICHAGE PROFIL MESSAGE*****/
/* PRESENTATION DU SUJET */
/* TITRE MESSAGES */
.tleP {
text-align:left; font-size:10px; padding-left: 5px; border-left: 3px solid white;
padding-bottom: 5px; padding-top: 5px; height:20px; border-right: 5px solid white;
color:#808080; background-image: url('http://i68.tinypic.com/1566ddf.png'); /* MODIFIABLE */
}

/* PSEUDONYME */
.nameP {
width:10px; height:20px; padding:5px;
text-align:center; text-transform:uppercase; font-size: 12px;
border-bottom: 1px solid #efefef; border-left: 1px solid #efefef; border-top: 1px solid #efefef; /* MODIFIABLE */
}
/* CITER/EDITER/IP */
.toolsP {
width:10px; height:20px; padding:5px; text-align:center;
border: 1px solid #efefef; /* MODIFIABLE */
}
/* APPARENCE MESSAGES */
div.postbody {
padding:10px; width: 710px; height: 600px; margin-top:10px;
overflow: auto;
background: white; border: 1px solid #efefef; /* MODIFIABLE */
text-align:justify;
}
/* BLOC JOUEUR */
.tlP {
margin-left:10px; margin-top:7px; width:250px; text-align:center;
}
/* BLOC AVATAR */
#blocAVA {
width:250px; height:400px; margin:-5px; overflow:hidden;
}
.blocAVA {
position:relative; width:250px; height:400px; overflow:hidden;
}
/* AVATAR */
.avaP {
width:250px; height:400px;
transition:transform 0.75s linear; -webkit-transition:transform 0.75s linear;
}
#blocAVA:hover .avaP {
transform:translateX(250px); -webkit-transform:translateX(250px);
}
/* BLOC INFORMATIONS JOUEUR */
.dtailS {
position:absolute; margin-top:-400px;
padding:5px; width:240px; height:390px; overflow:auto;
background-image: url('http://i68.tinypic.com/1566ddf.png'); /* MODIFIABLE */
transform:translateX(-250px); -webkit-transform:translateX(-250px);
transition:transform 0.75s linear; -webkit-transition:transform 0.75s linear;
}
#blocAVA:hover .dtailS {
transform:translateX(0px); -webkit-transform:translateX(0px);
}
/* CONTENUS INFORMATIONS JOUEUR */
.dtailS div{
margin:5px auto;
width:200px;  padding:5px;
font-family:Arial; font-size:11px; text-align:justify; border: 1px solid #efefef;
color:#adadad; background:white; /* MODIFIABLE */
}
/* TITRES INFORMATIONS JOUEUR */
.dtailS div span{
text-transform:uppercase; color:#9777d5; /* MODIFIABLE */
}
/* BLOC IMAGE RANG/RANG/IMAGES CONTACT */
#rankP {
margin-top:10px; margin-left:-5px;
width:248px; height: 245px; padding-top:15px; overflow:hidden;
background:white; border: 1px solid #efefef; /* MODIFIABLE */
}

/* IMAGES CONTACT JOUEUR */
.ktactP {
position:relative; z-index:3; margin:auto; margin-bottom: 3px; margin-top:-5px; width:250px; text-align:center;}

/* IMAGE RANG */
.imgrankP img{
margin-top:5px; width:230px;
}

/****FIN AFFICHAGE PROFIL MESSAGE****/

En vous remerciaaaaant

[Bad_girls]

Hello!

Essaie ce code dans les CSS. Change le 150 en taille que tu veux (en pixels)

Code:

.class-de-lavatar {
  max-width: 150px;
}

Cordialement

[Melodiam]

Hey !

Cela ne marche pas, le gif ne se redimensionne pas :-/

[Bad_girls]

Hello!

Désolée, je ne peux rien faire de plus alors, le souci vient peut-être d'ailleurs...

Chez moi ça fonctionne en tout cas.

Bonne soirée

Cordialement!

[Melodiam]

Pas de souci, merci d'avoir essayé !
J'ai encore remis la balise dans la class de l'avatar et même ailleurs pour voir, cela ne marche pas ^^

Quelqu'un saurait ce qui cloche ?

[Bad_girls]

Hello!
Il faut ouvrir: PANNEAU ADMIN - AFFICHAGE - COULEURS - CSS

$

Tu mets ton curseur à la suite mais la ligne en-dessous des codes que tu as déjà



Tu valides


Tu reviens sur ton forum et tu rafraîchis la page en faisant Maj et F5



et normalement, tu devrais avoir ta modification.

PS

Ce code ne doit être mis que là, enlève-le là où tu l'as mis

Citation: J'ai encore remis la balise dans la class de l'avatar et même ailleurs

Essaie et redis-moi

Cordialement

[tupac]

Bonjour,

S'il s'agit des images que l'on place dans les messages il existe une fonction dans le panneau d'administration pour limiter leur dimension.

Panneau d'administration / Général / Messages et Emails / Configuration / Redimensionnement des images.

Par contre s'il s'agit de l'avatar postez-nous votre template viewtopic_body une classe a du être crée pour modifier celui-ci.

[Melodiam]

Coucou vous deux !
Merci pour vos réponses **

Tupac -> le redimensionnement est de max 300 et ça touche à toutes les images du coup cela ne pouvait pas marcher ! o/

Bad_girl -> j'ai ajouté la balise dans la class de l'avatar, ça a marché mais m'a décalé le bloc de l'ava o_o Du coup, on m'a aiguillé avec l'astuce de rajouter une balise en plus et voilà, maintenant problème réglé !

Bref, je vous remercie en tous cas d'avoir essayé et je vous souhaite une boooonnne journée hehe !