Leaflet: Images' size in popups don't seem to count to determine popup's size

[professore]

I'm having a hard time getting around a problem I came across while using Leaflet's library on a Mapbox map. Specifically, I've written the code so that a popup is bind to each icon/marker on the map. Inside each popup there's an image that links to a different website. Unfortunately it seems that this image's size doesn't count towards the calculation of the size of the actual popup, having the following consecuences:

· the image is much bigger than the popup (this is how it is displayed: http://postimage.org/image/c7u0n5sx3/ )
·the width of the popup is 50px (wich is the minWidth), this can be changed in Leaflet.js, but it would mean that i have to standardize all the images to fit a certain size. This is very inconvenient.
· the autoPan option does't work anyways

My code is the following:

<?php  
// Retrieves info from all correct rows in database to further input in javascript
while ($row = mysql_fetch_assoc($get_info)){
$name = $row ['nombre'];
$lat = $row ['lat'];
$long = $row ['long'];

echo
    "<script type=\"text/javascript\">
    var latlng = new L.LatLng(".$row ['lat'].", ".$row ['long']."); 
    var flyer = \"<a href='boliches/pdnws/".$row ['nombre'].".php'><img src='boliches/flyers/".$day."/".$row ['nombre'].".jpg'/></a>\";
    var MyIcon = L.Icon.extend({
            iconUrl: 'boliches/icons/".$row ['nombre'].".png',
    shadowUrl: null, iconSize: new L.Point(50, 50),
    shadowSize: null,
    iconAnchor: new L.Point(25, 25),
    popupAnchor: new L.Point(1, 1)
    }); 
    var icon = new MyIcon();    
    var marker = new L.Marker(latlng, {icon: icon});
    map.addLayer(marker);   
    marker.bindPopup(flyer);
    </script>"; 
}
?>

Can you think of a possible solution to this? I'm afraid I'm quite a beginner when in comes to programming, but it's been too many days without being able to crack this one. Couldn't get any answers on stackoverflow.com, I really appreciate your help! Thank you so much!
Professore.

[professore]

Nevermind! Somehow It's solved now! AAAAAAAAAAAH Im so happy lol!

[ignacioavellino]

Hey! Care to share the answer? I'm having the same problem and would like to know how did you manage to solve it.
Thanks!

[danzel]

Set width/height on the image element.

[ignacioavellino]

Thanks for the reply Danzel! That did not help since the HTML element swith class leaflet-popup-content have a fixed with, on the HTML, not on the CSS.
I solved it by adding the following CSS definition

.leaflet-popup-content {
width:auto !important;
}

This basically will override the fixed width of 301px

Cheers!

[danzel]

Ah yes, the other thing you will need is this:
http://leafletjs.com/reference.html#popup-maxwidth

[ignacioavellino]

Good tip!! Thanks :)

[satbirkira]

I don't know why maxWidth has been chosen to default 300px. Seems completely odd that it wouldn't just size to what the content space was. I spend the whole day confused why leaflet would not size the popup correctly.

[mourner]

@satbirkira next time, just read the documentation.

[jakbaum]

@ignacioavellino

While your solution fixes the size of the popup, the result is shifted and the popup doesn't show up centered over the icon/marker... Any way to change that?

.leaflet-popup-content { width:auto !important; }

@danzel : setting the maxWidth on the popup doesn't help in my case. The popup width keeps on being the default width of 300px...

function pop_Fotos(feature, layer) {
var popupContent = '<img style="max-height:500px;max-width:500px;" src="...");
layer.bindPopup(popupContent, {maxWidth: 500, closeOnClick: true}); }

(if you think this is a case for StackOverflow rather than this issue, please give me a hint :-)

[ignacioavellino]

@jakbaum, I'm afraid I can't help you ... it's been long time since I don't participate in this project anymore, I don't even have access to the code. Sorry!

[jakbaum]

@ignacioavellino, thanks for your quick reply anyway!

[jakbaum]

@ignacioavellino @danzel I've now posted the question on StackOverflow, because I feel like it belongs there more than here: https://stackoverflow.com/questions/38170366/leaflet-adjust-popup-to-picture-size

[Sven74Muc]

This issue is pretty old and it still looks like it's an isue within MapsMarker Pro

Here's the reason why this issue is caused:
https://github.com/Leaflet/Leaflet/issues/5484

Some more URLs where the issue is present on MapsMarker Pro
http://stackoverflow.com/questions/38170366/leaflet-adjust-popup-to-picture-size/43829317#43829317
https://wordpress.org/support/topic/popup-and-image-size/

Hope someone can help to solve it.