Adaptation de l'image aux dimensions de le fenêtre du navigateur

[LPenseur]

Détails techniques

Version du forum : Inconnue
Poste occupé : Membre
Navigateur(s) concerné(s) : Mozilla Firefox, Autre
Captures d'écran du problème :



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

Description du problème

Bonjour,

je vous écris en étant membre d'un forum pour lequel l'administrateur reconnaît ne pas s'y connaître assez pour comprendre et résoudre le souci...

Il s'agit d'un problème d'affichage des images partagées, nous en sommes en 2022 et ce forum de ForumActif ne permet pas aux navigateurs d'adapter ces images à l'espace disponible, comme si la marge à droite n'était pas reconnue par le navigateur qui laissait, alors, l'image dépasser la largeur total de l'écran.

A été, dernièrement, paramétré une limite de 640 de largeur, mais ce n'est pas esthétique d'avoir cette ligne qui apparaît au-dessus des images pour proposer de "agrandir cette image" et "cliquez ici pour la voir à sa taille originale."

La première image est issue du forum d'où apparait ce souci et la seconde vient d'un autre forum de ForumActif où les choses se passe normalement.

https://forum.forumactif.com/t396867-ou-est-passe-mon-forum#3317095

Y'a-t-il une solution à appliquer à ce forum pour résoudre ce souci ?

Merci d'avance.

[chattigre]

Bonjour et bienvenue sur le Forum des forums Forumactif,

Alors il faut savoir que le comportement de ce forum que vous appelez "normal" n'est pas le comportement natif mais un comportement ajouté via un script

Pourriez-vous me donner, éventuellement sous balises hide, le lien d'un sujet où le dépassement est visible sur le forum afin que nous partions de la même base ?

Bonne journée
Cordialement

[LPenseur]

Bonjour, dans la première image, on voit la même photo que dans la deuxième image que j'ai postée.

Et quand je réduis la fenêtre du navigateur, sur le forum où il y a le problème, ça ne se réduit pas, mais une partie disparaît sur la droite, alors que l'autre se réduit correctement...



Nous avions pris l'habitude d'héberger nos images en 1024 pixels de large avec servimg, mais même dans ces dimensions, certaines personnes se plaignaient de ne pas pouvoir voir les images en intégralité.

Je trouve juste dommage qu'en 2022 nous soyons obligés de limiter les images à 640 pixels de large !



Dans le lien que j'ai caché, il suffit d'ouvrir une image à sa taille réelle et de réduire ensuite la fenêtre du navigateur et on voit comment le navigateur ne prend pas en compte la marge à droite et fait disparaître une partie de l'image au lieu de la réduire pour qu'elle soit visible réduite mais complète.

Merci de votre aide.

[MlleAlys]

Bonjour,
Normalement le code css suivant permet de limiter automatiquement la largeur des images à la place disponible :
- se rendre dans Affichage > Couleurs et CSS > onglet "feuille de style css"
- dans la grande zone de saisie, copier/coller le code suivant (s'il y a déjà des codes, aller tout à la fin, passer quelques lignes et coller celui-ci) :

Code:

/*taille des images dans les posts*/
.post-entry img {
  max-width: 100%;
}

- enregistrer.

Vous pouvez alors normalement désactiver l'option à 640px.

[orpheus]

Bonsoir,

ce que je vais dire n'est pas directement lié à votre problème mais pourrait éventuellement apporter un confort supplémentaire sur le forum.
Il s'agit d'utiliser le code javascript suivant sur les sujets, ce faisant, lorsque les membres publient une image, vous pouvez choisir une résolution d'image comme par exemple 350 px de largeur (c'est qu'un exemple) mais lorsque vous cliquez sur l'image, celle-ci s'agrandira.

Le code est à utiliser dans : Panneau d'administration => Modules => Gestion des codes Javascript => Créer un nouveau Javascript => Cocher "sur les sujets".

Code:

$(function () {
 
var getFancy = function () {
  $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.css"/><style>.fancybox-content{transition:none}</style>');
  $.ajax({url:'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.js',cache:true,dataType:"script"}).then(function(){
    $.fn.addBack = $.fn.addBack || function (selector) {
      return this.add(selector == null ? this.prevObject : this.prevObject.filter(selector));
    };
    $('body').css('transition-duration')!=='0s' && ($.fancybox.defaults.hideScrollbar = false);
  });
  getFancy = function () {};
};
var contents = $('.post-entry,.post-content,.content,td>.postbody');
contents.find('img').css({maxWidth:'100%'}).load(function () {
  var a = $(this).closest('a');
  if(a.is('[data-fancybox]') || a.length && !/^(.+)@\1$|\b(servimg\.com\/).*@.*\b\2(?!.*\/th\/)/.test(a.prop('href')+'@'+$(this).prop('src'))) return;
  if (150 < this.naturalWidth || 100 < this.naturalHeight) {
    $(this).wrap($('<a data-fancybox="gallery"/>').prop('href', $(this).prop('src'))).unbind('load');
    getFancy();
  }
}).load();
 
});

Outre l'agrandissement de l'image d'un simple clic, ce code permet également de « switcher » image à une autre avec les flèches du clavier, ou d'avoir un aperçu global de toutes les images présentes sur la page active en cliquant sur le cube en haut à droite. Il offre également la possibilité de lire les images de manière automatique en cliquant sur le bouton lecture, toujours en haut à droite.


Un aperçu du résultat ici :
https://anima-news.superforum.fr/t23-critique-blu-ray-cardcaptor-sakura-clear-card-kana-home-video

[Chacha]

Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.