Limiter agrandissement image

[M2M-JMP]

Bonjour,
Il me semble ne pas avoir vu ce sujet sur ce forum, voici donc ma question :

Quelqu’un saurait si il est possible de limiter la taille de l’agrandissement d’une image contenue dans une « galerie d’images » lorsque l’on clique dessus.
Concrètement, mes images contenues dans mes galeries d’images font 2000 pixels de largeur et, lorsque je clique dessus, l’agrandissement effectué est trop grand à mon goût. Est-il donc possible de limiter la taille de l’agrandissement SANS changer la taille originale de mes images (2000 pixels).

Merci d’avance pour vos réponses !
M2M

[FredVig]

Il faut juste changer la taille du fichier d'origine. Le script qui gère les diaporama n'est pas facilement accessible. Si vous modifiez cela avec du code, vous aurez d'autres soucis successifs.

[M2M-JMP]

Merci pour la réponse!
Mince si cela est complexe...
Et changer la taille du fichier semble évident mais le problème est que je travail sur mac avec un écran Rétina (haute définition): je n'arrive pas à avoir une image nette (sur mon ordi) si mon image d'origine fait moins de 2000 pixels de largeur...et ceci malgré de nombreux tests!

[FredVig]

La responsivité positive, c'est un sujet d'actualité !
La galerie de jimdo, version agrandie, se dimensionne selon la taille de l'écran du visiteur en tenant compte de la résolution d'écran. La grande image importée > permet de s'afficher sur un écran retina comme sur un GSM.
Pour ajouter de la marge autour de l'image, il faudrait contraindre le script du diaporama à rajouter cette marge. Et nous n'avons pas accès au script.
Il serait simple de rajouter de la marge (de la m^me couleur que le fond du diaporama) directement sur chaque fichier importé. Dans ce cas, l'image serait aussi réduite sur un GSM, il faut que cela convienne. De plus, la marge sera toujours un peu visible, car il est impossible de faire correspondre le profil colorimétrique de l'image avec celles des ordinateurs des visiteurs.
Une solution serait de changer les marges avec du CSS, mais on va certainement créer des soucis en chute de dominos. (je travaille sur une prestation similaire depuis une semaine…)
Il existe des diaporamas qui peuvent s'intégrer en widget, et peut-être certains permettent d'ajouter cette marge.
Ce serait sans doute la solution la plus simple.
Mais…
Ce qu'il faut garder à l'esprit, c'est que vous faites un site pour les visiteurs. Les visiteurs le consultent sur des navigateurs très divers, avec des résolutions très diverses. ils "voient" forcément quelque chose de différent que vous. En fait, ils utilisent ce qu'il trouve sur votre site pour le consulter à leur façon.
Il faut penser votre site avec cette dynamique, quitte à renoncer à certains aspects, "qu'est-ce que je veux montrer ?", "à quoi je peux renoncer ?"

[M2M-JMP]

Merci pour cette réponse bien détaillée !
Dans l’idée, j’avais fait des essais en ajoutant une marge à mes images et, sachant que j’ai adapté à mes diaporamas un fond blanc, en ajoutant des marges blanches cela résolvait le problème de colorimétrie mais pas celui, vous avez raison, des GSM. De plus, les vignettes deviennent bien sur trop petites, plus assez lisibles...
Bref, mon sujet de méditation du soir sera effectivement : "qu'est-ce que je veux montrer, à quoi je peux renoncer ?"...
Bonne soirée
M2M

[FredVig]

Je n'avais pas pensé aux vignettes…

Si vous voulez tester mon adaptation par code (malgré mes réticences) :

Code:

<style>
@media(min-width:700px){.pswp__img{padding:5vh;}}
</style>

ajoutez dans "modifier le head"
Cela va rajouter une marge autour des images (agrandies seulement) proportionnelle à la hauteur de la fenêtre navigateur, mais seulement pour des largeurs de fenêtre supérieures à 700px (pas les GSM)
Vous pouvez changer la valeur 5vh dans une mesure de 1 à 20 environ (100vh = hauteur de la fenêtre courante)

[M2M-JMP]

Alors j’ai pu tester votre adaptation et il y a un problème :
Cela crée des marges égales de chaque coté et, en sachant que l’image va s’adapter à ce nouvelle espace, elle se déforme car cette espace et l’image ne sont plus homothétiques (ce qui est logique…). En gros, plus je vais ajouter de la marge, plus mon image en s’adaptant va « s’étirer ».
La petite solution que j’ai essayée ensuite a été d’ajouter des marges en haut et en bas de l’image de manière à créer un format carré, ce qui permet donc de régler le problème de l’homothétie et les vignettes restent lisibles (le fait de ne pas ajouter de marge à droite et à gauche ne réduit pas la taille de la vignette mais ajoute simplement de l’espace en haut et en bas entre chaque « ligne d’images »).
Finalement cela fonctionne mais, c’est la où vous aviez raison, en visualisant le résultat sur un ordinateur portable de taille « classique, » l’image agrandie est visuellement trop petite lorsqu’elle est parfaite sur mon 27 pouces…
Bref "qu'est-ce que je veux montrer, à quoi je peux renoncer ?" est de nouveau d’actualité… !
En tout cas, un grand merci pour votre aide !!

[FredVig]

L'image ne doit pas se déformer avec ce code. Le problème doit être ailleurs. (il me semble avoir lu un truc sur les écrans rétina à ce sujet…) > ici retina et flexbox
Mais de toute façon, c'est un problème sans solution parfaite, car le problème est de vouloir contrôler comment nos visiteurs voient notre contenu : cela dépend d'eux, pas de nous.

[Contenu sponsorisé]