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

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.

[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!

[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.