Question

I'm using 'leaflet.js' placing popup markers on a map. The following code is in a javascript file. An image appears when you click on the popup.

However the image is quite large when you click, how can I place css on this image so it can look smaller when the popup is clicked.

var popUpPic = "http://www.prodirectsoccer.com/us/productimages/thumbs/186846.jpg" ;
footballpitch.bindPopup("<img src='" + popUpPic + "'/>") ;

Answer 1

In the code, the img tag can have attributes like height and width. In bindPopup() method. The code changes are given below.

The img tag has attribute height, width to adjust the height and width. It can be embedded inside the bindPopup() method as a parameter html tag. The value given in the code width="42" height="42" can adjust as per your requirement.

Remove the above (given in your question) two line, and replace it with the below code [Adjust the value width="42" height="42" as you wish]

#CODE STARTS HERE

var popUpPic = "http://www.prodirectsoccer.com/us/productimages/thumbs/186846.jpg" ;
footballpitch.bindPopup("<img width="42" height="42" src='" + popUpPic + "'/>") ;

#CODE ENDS HERE