Make boundary for ol static image - openlayers-5

Question

I'm using ol v5.3.0 for view static image.
I want to bound the image for the size of the ol div.
When the image minimize more than the div size the will not minimize anymore.
I tried to use the projection attribute of the static image with the extent of the original image size
But it does not help.
there is any option to do it?

Answer 1

Based on this example https://openlayers.org/en/v4.6.5/examples/static-image.html
Instead of opening immediately at zoom 2, if first you fit the extent to the map size and get the zoom level (which will be fractional) which that produces and set it as the minimum zoom the map cannot be zoomed out beyond the size of the image (although it is possible to pan outside the extent).
var extent = [0, 0, 1024, 968];
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
var map = new ol.Map({
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
attributions: '© xkcd',
url: 'https://imgs.xkcd.com/comics/online_communities.png',
projection: projection,
imageExtent: extent
})
})
],
target: 'map',
view: new ol.View({
projection: projection
})
});
var view = map.getView();
view.fit(extent, { constrainResolution: false });
view.setMinZoom(view.getZoom());
// set opening zoom level (zoom set by code must not be less than the minZoom)
view.setZoom(Math.max(2, view.getMinZoom());
var center = ol.extent.getCenter(extent);
view.on(['change:center','change:resolution'], function() {
// map.on('moveend', function() { // alternative
var viewCenter = view.getCenter();
if ((viewCenter[0] != center[0] || viewCenter[1] != center[1]) && view.getZoom() == view.getMinZoom()) {
view.setCenter(center);
}
});