Publier des images sans message d'agrandissement

 :: Avant tout :: Staff & Vous :: Aide & Support
La Gardienne
◊ Légende ◊
avatar
Nombre de messages : 1775
Rôle : Compte Fondateur

Plus sur le personnage
Âge: Inconnu
Race: Inconnue
Dim 09 Sep 2018, 15:54


Codes pour les images



Suite à une mise-à-jour de Forumactif, il y a de cela maintenant longtemps, le forum n'affiche plus les images plus grandes que 300px par 400px directement. En effet, toutes images plus grandes que ce format se voient redimensionnées à cette taille avec une notion « Agrandir cette image Cliquez ici pour la voir à sa taille originale ». Ce n'est franchement pas idéal pour le design des carnets de voyage ou encore des entêtes de poste. Même pour les signatures cela est déplaisant quand celle-ci dépasse la largeur permise par Forumactif. Pour vous aider à contourner le problème, voici quelques codes pour intégrer des images.

1- Redimensionner une image dans un format en-dessous des limites de forumactif

Si vous souhaitez afficher une image dans un format plus petit que 300x par 400px et que vous souhaitez conserver ses proportions, il existe une façon simple. Il vous faut simplement réduire la taille à l'échelle. Par exemple ici, pour une image de 564px par 594px, je vais la réduire du quart à 141px par 148px. Vu les chiffres, je peux me permettre d'arrondir les valeurs sans que cela ne déforme l'image. Mon image est donc désormais 4 fois plus petite que l'originale.

Attention! Utilisez cette méthode pour agrandir une image ne fonctionnera pas. Consultez plutôt la seconde méthode.



Code:
<img src="https://cdnb.artstation.com/p/assets/images/images/004/407/545/large/amandine-girard-koni-amandine-girard-koni-legacy-hd.jpg?1483484820" style="height: 140px; width: 150px;"/>


2- Recadrer une image très grande ou trop petite.

Le code suivant est un peu plus complet, mais tellement pratique. Avec ce code vous pourrez afficher des images plus grande que le format autorisé par forum actif, mais aussi dans un format différent à l'original en tronquant l'image. Dans l'exemple, l'image originale fait 564px par 798px. C'est à dire qu'elle est de format portrait.

Avec le code, elle a été retaillée au format 500px par 300px qui n'est pas du tout le même format à l'échelle puisqu'il est de format paysage. L'image a été réduite (avec le transform:scale(), expérimenté pour comprendre son fonctionnement) et déplacée dans le cadre pour un meilleur rendu. L'excédant non affiché de l'image a été tronqué. Ce code peut vous permettre de recadrer le sujet de l'image et éliminer des zones que vous ne voudriez par exemple pas voir. Le cadre rouge ici est une simple aide pour mieux visualiser la taille exacte du div et gérer le déplacement de l'image à l'intérieur pour éviter des zones vides. Une fois que l'image est parfaite, vous pouvez retirer le "border: 2px solid red".

Noter que la balise IMG doit toujours avoir un format en dessous de 300px par 400px sinon Forumactif redimensionnera. Il vous suffit de réduire la taille originale de l'image à l'échelle pour qu'elle soit en-dessous des dimensions problématiques et ajuster avec le transform:scale(). Ici, j'ai réduis de moitié la taille de l'image et réajusté en augmentant le « scale » à 2 pour que l'image soit 2 fois plus grosse que 282px par 399px. Ce qui m'a ramené à sa taille originale.



Code:
<div style="border:2px solid red; height: 300px; width: 500px; overflow: hidden;"><img src="LIEN DE VOTRE IMAGE" style="width:282px; height: 399px; transform:scale(2); margin-top:80px; margin-left:100px;"/></div>




Code:
<div style="border:2px solid red; height: 150px; width: 150px; overflow: hidden;"><img src="https://i.pinimg.com/564x/2b/25/0f/2b250f70daa1085ef37918b8ef42b8e0.jpg" style="width:282px; height: 399px; transform:scale(0.7); margin-top:-60px; margin-left:-50px;"/></div>


Crédit à Taëva. Réalisé pour l'usage sur rpg-chevalier seulement.
Page 1 sur 1

Sauter vers :