I would like to display images in popups. It works but the problem is the images are too large:

enter image description here

I've added a class in the img tag in my js-file:

var picURL2 = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';

shelter1.bindPopup("<img src='" + picURL2 + "'" + "class=popupImage" + "/>");

The class in my css file looks like this:

.popupImage {
    max-width: 20%;
    max-height: 20%;

But the image still streches beyond the popup container. The console doesn't produce any errors so I assume I've added the class inside the img tag correctly.

  • How about if you put a <div> around the img and give that div a size. Maybe the img's current parent does not have a declared width to calculate the 20% of. (Spoken without having used leaflet.) That's in the spirit of figuring it out, as of course at that point you may as well explicitly set width or height of the img. – deg Oct 15 '17 at 12:40
  • I've added the class like this (still not working): shelter1.bindPopup("<div class=popupImageContainer>" + "<img src='" + picURL2 + "'" + "/>" + "</div>");. Also tried to use styles inside the img tag and define height and width. Didn't work either – Saud Oct 15 '17 at 13:54

There are two spaces missing. The first one is not critical but the second one is. It should be:

shelter1.bindPopup("<img src='" + picURL2 + "'" + " class=popupImage " + "/>");
  • The spaces did the trick!. The image adjusts down in size. However, when I set the max-width and max-height to 300% or above the image stretches beyond the popup container. Have used width/height and adjusted in margins but the image still stretches beyond the container. – Saud Oct 15 '17 at 18:11
  • 1
    So I came up with a solution. In my CSS-file I created a container: .popupContainer {width: 200px; height: 200px;} and then added the image width in the container class: .popupContainer image {width: 100%;} – Saud Oct 15 '17 at 19:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.