How can I change the extent array in vue3-openlayer dynamically

Question

I have several historical maps (around 8kx8k) that I display with a vue3 component. the image and the width and height are passed to these components.

<MapFlex :imgurl="content.maps[5].karte" :width="width" :height="height"></MapFlex>

for this I used the ol-source-image-static

that works quite well so far. The maps are more square, the area for the card is a landscape format rectangle. I now want to show this map fully visible when opened. that works if I don't set an extent in the view.

when I use the extent [-width/2, -height/2, width/2, height/2] I can no longer move the image out of the display field. but I can't make it smaller either. the map fills the view area.

if I want to change the extent rect dynamically depending on the zoom, there is a feedback loop, the system becomes lame and at some point it also stops.

What I actually want to do is that I switch between different extents when changing the zoom.

Or is there a function with which I would like to dynamically generate the appropriate extent. It is important that the map is visible in a smaller size in the display area and can then be zoomed in without being able to slide the map out of the area.

<template>
    <div class="map-container">
        <ol-map :loadTilesWhileAnimating="true" style="height:980px" >
      
            <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" :maxZoom="maxZoom" :minZoom="minZoom" :projection="projection" :extent="extent"  @zoomChanged="onZoomChanged"  @resolutionChanged="onResolutionChanged"/>
           
            <ol-image-layer>
               
                <ol-source-image-static :url="imgUrl" :imageSize="size" :imageExtent="imageExtent" :projection="projection"></ol-source-image-static>
            </ol-image-layer>

        </ol-map>
    </div>
</template>



<script>
import { ref, reactive} from 'vue'


export default {

    props: {
        imgurl: {
            type: String,
            default: "http://localhost:8080/karten/map-1.jpg",
        },
        width: {
            type: Number,
            default: 1024
        },
        height: {
            type: Number,
            default: 968
        }
    },

    setup(props) {

        const zoom = ref(2)
        const minZoom = ref(1)
        const maxZoom = ref(6)
        const rotation = ref(0)
        const faktor = 2
        const size = ref([props.width, props.height])
        const center = ref( [size.value[0]/2, size.value[1]/2] ); //  ref ([0,0]) // 
       
        const imageExtent = ref( [-1*props.width/2, -1*props.height/2 , props.width/2, props.height/2 ] )
        const extent = ref( [-1 * props.width / faktor, -1 * props.height / faktor, props.width / faktor, props.height / faktor]  )  // number[leftBottomX, leftBottomY, rightTopX, rightTopY]
        const currentZoom = ref(zoom.value);
        
        const emitter = useEmitter();

        console.log(extent);
        const projection = reactive({
            code: 'xkcd-image',
            units: 'pixels',
            extent: extent,
        

        const onZoomChanged = (val) => {
            currentZoom.value = val;
             if (val < 3){
                 extent.value =  [-1 * props.width / 1.5, -1 * props.height / 1.5, props.width /1.5, props.height / 1.5]  
            }
            extent.value = [-1 * props.breite / 1.2, -1 * props.hoehe / 1.2, props.breite / 1.2, props.hoehe / 1.2] 
        }
        
        const onResolutionChanged = () => {
            // console.log("onResolutionChanged");
        }


        return {
            center,
            projection,
            zoom,
            minZoom,
            maxZoom,
            rotation,
            size,
            imageExtent,
            extent,
            imgUrl,
            onZoomChanged,
            onResolutionChanged, 
            
        }
    },
}

</script>