I would like to set the width to be always 100% of the screen size when clicking on zoom out on the imageOverlay on leaflet.js, I have set all the options for maxBounds and minZoom but on large sizes of screen when zooming out of the image, the bounds appear like on the image below. could some assist me on where i am going wrong?

var secondaryMap = L.map("secondaryMap", {
    minZoom: -0.15,
    maxZoom: 1,
    center: L.latLng(-1165.5, 1032),
    zoom: 0,
    zoomSnap: 0.25,
    zoomDelta: 0.25,
    crs: L.CRS.Simple,
    scrollWheelZoom: false,
    maxBoundsViscosity: 1.0,
    interactive: true,
    doubleClickZoom: false,
    touchZoom: false,
    tap: true,
    tapTolerance: 50,
    bounceAtZoomLimits: false,
    attributionControl: false,
    zoomControl: false,
});

// dimensions of the image
var w = 2200,
    h = 1778,
    url = $('#secondaryMap').attr('src');

// calculate the edges of the image, in coordinate space
var southWest = secondaryMap.unproject([0, h], secondaryMap.getMinZoom());
var northEast = secondaryMap.unproject([w, 0], secondaryMap.getMinZoom());
var bounds = new L.LatLngBounds(southWest, northEast);
var layer = L.imageOverlay(url, bounds).addTo(secondaryMap);
secondaryMap.fitBounds(bounds);
secondaryMap.setMaxBounds(bounds);