Publier des images sans message d'agrandissement

 :: Avant tout :: Staff & Vous :: Aide & Support
La Gardienne
◊ Légende ◊
avatar
Nombre de messages : 1783
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,l'image originale est de 564px par 594px. je vais la réduire à 150px de large.

Cette méthode fonctionne aussi pour agrandir une image tout en gardant son ratio.



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: auto; 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".




Code:
<div style="border:2px solid red; height: 300px; width: 500px; overflow: hidden;"><img src="LIEN DE VOTRE IMAGE" style="width:500px; height: auto; margin-top:0px; margin-left:0px;"/></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

 :: Avant tout :: Staff & Vous :: Aide & Support
Sauter vers :