Improve resizing of bounding box

frontend/src/components/Container.svelte

@@ -13,24 +13,42 @@
     { id: 2, x: 0, y: 0 },
   ]);
 
+  let width = $state(0);
+  let height = $state(0);
+
+  const resize = () => {
+    width = image?.getBoundingClientRect().width ?? 0;
+    height = image?.getBoundingClientRect().height ?? 0;
+  };
+
   onMount(() => {
     ws = new WebSocket("/ws");
     ws.onmessage = (event) => {
       const data = JSON.parse(event.data);
       trackers = data;
     };
+
+    width = image?.getBoundingClientRect().width ?? 0;
+    height = image?.getBoundingClientRect().height ?? 0;
   });
 </script>
 
+<svelte:window onresize={resize} />
 <div class="relative">
-  <img src="/scene_drawing.png" alt="" bind:this={image} class="scale-50" />
+  <img
+    src="/scene_drawing.png"
+    alt=""
+    bind:this={image}
+    class="scale-50"
+    onload={resize}
+  />
   <div
     bind:this={parent}
     class="absolute inset-0 border border-red-500"
     style={"width: " +
-      image?.getBoundingClientRect().width +
+      width +
       "px; height: " +
-      image?.getBoundingClientRect().height +
+      height +
       "px;" +
       "transform: translate(50%, 50%);"}
   >