Leaflet : fullscreen plugin

Question

I need to use a fullscreen plugin(Leaflet.fullscreen) but it does not work as I would like.

The image is displayed in full screen but with gray edges. Like this :

Code :

//Creation de la map
var map = L.map('mapid',{
              zoomSnap: 0,
              fullscreenControl: true});
//On bloque le zoom et le dragging
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
map.zoomControl.remove();
map.dragging.disable();

//Création de la taille de la carte avec les coordonnées polaires
var coinGauche = new L.LatLng(43.6421,3.9626);
var coinDroit = new L.LatLng(43.6571,3.9909);
var bounds = new L.LatLngBounds(coinGauche,coinDroit);
map.fitBounds(bounds);

// Initialise le FeatureGroup pour sauver les items
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

// Initialise draw control et passe le FeatureGroup pour sauver les items
var drawControl = new L.Control.Draw({
    edit: {
        featureGroup: drawnItems //OBLIGATOIRE
    }
});
map.addControl(drawControl);


//Image a mettre dans la carte
var imageUrl = 'file:///C:/Users/XXX/Desktop/geofencing/map.svg'

//Creation de l'overlay avec la carte
var overlay = L.imageOverlay(imageUrl, bounds);
map.addLayer(overlay);

But,I would like the image to really take the whole screen. Any formats (16/9 4/3 or 16/10) display with gray edges...

Answer 1

OK so I found the solution.

It is necessary to intercept the passage in full screen and to force fitBounds

that.map.on('fullscreenchange', function () {
    if (that.map.isFullscreen()) 
         console.log('entered fullscreen');
    else 
         console.log('exited fullscreen');
    that.map.fitBounds(that.bounds);
});