1 Sujet de Katryne 18-04-2025 11:02 -

Salut la compagnie !
Je trouvais que les très grandes images prenaient trop de place sur la page (showmedia.php). Et parfois aussi que les trop petites images étaient ridicules au milieu de la page, Alors j'ai indiqué en css que je les voulais toutes en 60 %  de large, pas plus pas moins, avec ça :

div#imgviewer div#imageviewer.canvas img#theimage {margin: 1rem auto !important;width:60%;max-width:60%;height:auto;}

C'est tout beau, pas déformé, comme je veux, sauf que dans la bataille, j'avais oublié les étiquettes de nom qui se sont toutes envolées, pour se recoller ailleurs. Va falloir que je retravaille ça. Et peut-être que ce sera pas possible car je ne saurai pas prendre en compte le script des étiquettes.

Voilà le beau résultat.

https://agora.chauvigne.info/uploads/images/2025/04/18/image.png

Aucun de nous ne sait ce que nous savons tous, ensemble.

WWW

2 Réponse de Katryne 19-04-2025 10:41 -

Il ya pas que le redimensionnement des images (60% max) qui influe sur l'affichage des tags à la bonne place, ya aussi  l'encadrement (border et box-shadow et padding et margin)

#theimage {margin-top:1rem;padding:1rem !important;border: 1px solid rgb(40, 43, 117); box-shadow: 0 0 0 5px #2a2d7a inset, 0 0 0 6px rgba(255, 255, 255, 0.6) inset, 0 0 40px #14153a inset, 0 10px 15px -10px rgba(0,0,0,0.6) !important;max-width:95%;}

Bon, je préfère garder mon décor et abandonner les tags, c'est dommage pour les photos de mariage. Ce n'est pas envisageable de refaire les étiquettes en fonction d'une image "encadrée", puisque en admin, c'est sur une image brute que l'on dessine les tags.

Aucun de nous ne sait ce que nous savons tous, ensemble.

WWW

3 Réponse de Eric 24-04-2025 13:54 -

Bonjour,
As-tu essayé de redimensionner #imgviewer et y ajouter un padding plutôt que de redimensionner l'image ?

4 Réponse de Katryne 24-04-2025 14:59 -

Je n'y arrive pas Éric; merci de la suggestion. Si j'applique le css de redimensionnement sur #imgviewer, l'image n'est pas redimensionnée, elle s'équipe d'un scroll latéral et les étiquettes sont toujours dans les choux.

J'ai essayé successivement avec :
#imageviewer
div#imgviewer
div#imgviewer div#imageviewer.canvas

Ya que
div#imgviewer div#imageviewer.canvas img#theimage

qui redimensionne la photo.

Aucun de nous ne sait ce que nous savons tous, ensemble.

WWW

5 Réponse de MichelKirsch 25-04-2025 11:06 -

Si l'image est réduite à 60%, il faut que les "coordonnées" des rectangles d'étiquettes soient redimensionnés de la même façon...
Bon courage ! :-)

WWW

6 Réponse de Katryne 25-04-2025 12:20 -

Faudrait juste que je prenne l'habitude de calibrer mes photos AVANT l'upload. Je n'ai qu'une dizaine de photos taguées, mais ce fut long à faire. Et j'en ai encore quelques unes en attente. Bon, je vais démonter mes fioritures.

Aucun de nous ne sait ce que nous savons tous, ensemble.

WWW

7 Réponse de Katryne 08-05-2025 06:56 -

J'ai essayé autre chose : sans redimensionnement, j'ai mis les mêmes borders et margins CSS en admin que côté public. Mais c'est pas encore ça : quand je trace les cadres, je dessine à côté. Dans 12 ou 15 ans, j'arriverais peut-être.

Aucun de nous ne sait ce que nous savons tous, ensemble.

WWW