Discussion :

[Souleyre]

Bonjour à tous,
J'espère être dans le bon forum.
J'ai créé une page sous Leaflet qui affiche une photo après un clic dans une pastille:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

L.circleMarker([0.3577,0.6137],{color: "#f00",radius: 4}).bindPopup("<img src='98.jpg'/>").addTo(map);

L'instruction fonctionne très bien à un détail près: la photo déborde complètement de la fenêtre du Popup.
En fait, il faudrait pouvoir forcer cette fenêtre à englober rigoureusement l'image.
Et ça, je ne sais pas faire!
Quelqu'un aurait-il une idée?
Souleyre.

[SpaceFrog]

Merci de preciser qu'il s'agit d'un plugin http://leafletjs.com/

Mon conseil (hormis te plonger dans la doc du site):

Regarde dans firebug le code html généré, repère l'élément conteneur
applique lui un style css qui va bien
ou recupère ses dimensions afin de les appliquer à ton image ...

[Souleyre]

Bonjour SpaceFrog,
Merci pour ta réponse.
Il ne s'agit pas d'un PlugIn.
Je n'ai rien repéré dans FireBug...
Je ne souhaite pas modifier le css car l'élement conteneur s'applique aussi à d'autres informations affichées.
Je me demandais si, à l'intérieur même de la ligne de code citée plus haut, il n'était pas possible d'insérer une instruction permettant de faire un dimensionnement automatique.
Les photos peuvent être de dimensions variables.

[SpaceFrog]

librairie plugin c'est du kiffkiff ...

Je n'ai rien repéré dans FireBug...

c'est que tu as mal cherché... firebug montrant l'intégralité du DOM, les objets y sont forcément

Je ne souhaite pas modifier le css car l'élement conteneur s'applique aussi à d'autres informations affichées.

Sans changer le css tu ne changeras pas l'apparence ...

il n'était pas possible d'insérer une instruction

cette instruction sera FORCEMENT une instruction de style ... (css)


Tu peux tenter d'indiquer un style directement dans la balise image ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.bindPopup("<img src='98.jpg' style='width:...; height:....' />").addTo(map);

[Souleyre]

Excuse-moi pour la confusion librairie <--> plugin.
Ta solution:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.bindPopup("<img src='98.jpg' style='width:...; height:....' />").addTo(map);

est excellente, c'est bien ce que je cherchais...
A un détail près, je pensais que le dimensionnement indiqué agirait sur le conteneur mais, en réalité, il agit sur la photo!

[SpaceFrog]

oui je n'ai vu en premier ressort que cette solution de redimensionner l'image.

Après je pense que la lib possède sans doute une méthode de redimensionnement dynamique du conteneur.
Ne connaissant pas cette lib et n'ayant pas approfondit je ne sais pas trop ce que tu utilises, mais les methodes en manquent pas http://leafletjs.com/reference.html#map-options