diff --git a/web/js/sections/board-control.js b/web/js/sections/board-control.js
index 46c4a90..4f3adae 100644
--- a/web/js/sections/board-control.js
+++ b/web/js/sections/board-control.js
@@ -72,8 +72,8 @@ function buildHTML() {
           <div class="card-header"><span class="card-title">Interactive Map</span></div>
           
           <div style="flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden;">
-            <div id="map-container" style="position: relative; width: 100%; max-width: 800px; aspect-ratio: 300/175; background: #111; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.5);">
-              <img id="bg-image" src="web/assets/backgrounds/${currentBg}/bg.svg" style="width: 100%; height: 100%; object-fit: cover; position: absolute; top:0; left:0; border-radius: 8px;" />
+            <div id="map-container" style="position: relative; width: 100%; max-width: 800px; background: #111; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.5);">
+              <img id="bg-image" src="web/assets/backgrounds/${currentBg}/bg.svg" style="width: 100%; display: block; height: auto; border-radius: 8px;" />
               <div id="markers-layer" style="position: absolute; top:0; left:0; width:100%; height:100%;"></div>
             </div>
           </div>
@@ -217,7 +217,7 @@ function renderSpots() {
 
   const w = bounds.xMax - bounds.xMin;
   const h = bounds.yMax - bounds.yMin;
-  mapContainer.style.aspectRatio = `${w}/${h}`;
+  // mapContainer.style.aspectRatio = `${w}/${h}`; // Let natural image aspect ratio dictate container height
   
   listEl.innerHTML = '';
   markersEl.innerHTML = '';
diff --git a/web/js/sections/input-text.js b/web/js/sections/input-text.js
index f2ea986..2a08c73 100644
--- a/web/js/sections/input-text.js
+++ b/web/js/sections/input-text.js
@@ -88,8 +88,8 @@ function buildHTML() {
           <div class="card-header"><span class="card-title">Live Position</span></div>
           
           <div style="flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden;">
-            <div id="map-container" style="position: relative; width: 100%; max-width: 800px; aspect-ratio: 300/175; background: #111; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.5);">
-              <img id="bg-image" src="web/assets/backgrounds/${currentBg}/bg.svg" style="width: 100%; height: 100%; object-fit: cover; position: absolute; top:0; left:0; border-radius: 8px;" />
+            <div id="map-container" style="position: relative; width: 100%; max-width: 800px; background: #111; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.5);">
+              <img id="bg-image" src="web/assets/backgrounds/${currentBg}/bg.svg" style="width: 100%; display: block; height: auto; border-radius: 8px;" />
               <div id="pos-marker" class="pos-marker" style="display:none;"></div>
             </div>
           </div>
@@ -240,7 +240,7 @@ async function loadSpots() {
     if (mapContainer) {
       const w = bounds.xMax - bounds.xMin;
       const h = bounds.yMax - bounds.yMin;
-      mapContainer.style.aspectRatio = `${w}/${h}`;
+      // mapContainer.style.aspectRatio = `${w}/${h}`; // Let natural image aspect ratio dictate container height
     }
     updatePosMarker();
   } catch(e) {