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

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>