javascript - OpenLayers 3 fitExtent not working as expected -

i using openlayers 3 display single image. trying write function zoom left side of image touches left side of container , right side of image touches right side of container. doesn't matter if top , bottom of image outside view.

i have set projection extent same image resolution:

var extent = [0, 0, 2480, 3508]; projection = new ol.proj.projection({     code: 'image',     units: 'pixels',     extent: extent }); 

i experimenting fitextent function in console window using code:

map.getview().fitextent([0,0,2480,3508],map.getsize()) 

the result got wasn't quite expecting. image centred, appears smaller expecting. expecting @ least top , bottom of image touching top , bottom of container.

an explanation of why happening fantastic. solution fits image left on left , right on right (a zoomtoextenty function) better.

example fiddle...

thanks comment @bartvde able make fitextent() work how expected first calculating the resolution of longest axis:

    var imgw = extent[2];     var imgh = extent[3];     var boxw = document.getelementbyid('map').offsetwidth;     var boxh = document.getelementbyid('map').offsetheight;      var xres = imgw / boxw;     var yres = imgh / boxh;     var maxres = xres < yres ? yres : xres; 

then setting maxresolution of default map view:

view: new ol.view({     projection: projection,     center: ol.extent.getcenter(extent),     zoom: 0,     maxresolution:maxres }) 

my other requirement of setting zoom level left , right of image touched left , right of container solved setting resolution of view of x axis:

    //set resolution of xaxis.     map.getview().setresolution(xres); 

see this fiddle example of both above settings in action.