The coordinate and width doesnt fix on fullscreen mode

[apeengggg]

how to make the object draggable is fixed when i fullscreen the monitor with F11 ? My need is to display images without scrolling right/left or up/down, like the image I have attached when I go fullscreen then the objects move and don't stay fixed.

On Normal Tab Mode :

On Fullscreen Tab Mode :

<div class="row no-gutters" v-if="image_from_db">
            <div class="col-12 border border-dashed" style="border-color: red; background-color: rgba(255,255,255,0.5);"
              v-for="(im, indexIm) in images" :key="indexIm">
                <draggable-resizable-vue
                    :parent="false"
                    v-for="(item, index) in im.area"
                    :class="colorFill(item, false)" 
                    v-model:x="item.COOR_X"
                    v-model:y="item.COOR_Y" 
                    v-model:h="item.HEIGHT" 
                    v-model:w="item.WIDTH" 
                    v-on:click="onSelectArea(index, indexIm, item)"
                    handles-type="borders" 
                    style="cursor: pointer"
                    @resizestop="onResizing"
                    :draggable="false"
                    :resizable="false"
                >
                </draggable-resizable-vue>
                <img :src="'data:image/jpeg;base64,'+im.IMG_CONTENT" class="side-image-db mt-1">
            </div>
          </div>