diff --git a/src/pages/detect.vue b/src/pages/detect.vue
index 18e9eb2..3b1976c 100644
--- a/src/pages/detect.vue
+++ b/src/pages/detect.vue
@@ -4,11 +4,9 @@
       <f7-navbar :sliding="false" back-link="Back">
         <f7-nav-title sliding>{{ regions[activeRegion] }}</f7-nav-title>
       </f7-navbar>
-      <f7-block style="display: flex; justify-content: flex-start; flex-direction: column; align-items: center; height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top));">
-        <div class="image-box" style="display: flex; flex-direction: column; align-items: center; flex: 1 1 0%;" >
-            <img :src="imageView" ref="image_src" style="min-width: 0; min-height: 0; flex: 1 1 0"/>
-            <div ref="structure_box" style="border: solid 3px yellow; position: absolute; display: none;" />
-        </div>
+      <f7-block style="display: flex; justify-content: flex-start; flex-direction: column; align-items: stretch; height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom)); box-sizing: border-box; width: 100vw;">
+        <img :src="imageView" id="im-display" ref="image_src" style="flex: 1 1 0%; object-fit: contain; max-width: 100vw; min-height: 0;" />
+        <div ref="structure_box" style="border: solid 3px yellow; position: absolute; display: none;" />
         <f7-segmented class="image-menu" raised style="margin: 5px; width: 50%; max-width: 400px; min-width: 192px; flex: 0 0 auto;">
             <f7-button popover-open="#region-popover">
                 <img :src="imageRegion" style="height: 100%;" />
@@ -23,8 +21,8 @@
                 <img src="../assets/icons/videocam.svg" style="height: 100%;" />
             </f7-button>
         </f7-segmented>
-        <input type="file" ref="image_chooser" @change="getImage()" accept="image/png, image/jpg, image/jpeg" style="display: none;"/>
-        <div v-if="resultData && resultData.detections" class="chip-results" style="flex: 0 0 auto;">
+        <input type="file" ref="image_chooser" @change="getImage()" accept="image/*" style="display: none;"/>
+        <div v-if="resultData && resultData.detections" class="chip-results" style="flex: 0 0 auto; align-self: center;">
             <f7-chip v-for="(result, idx) in resultData.detections" :class="(idx == selectedChip) ? 'selected-chip' : ''" :text="result.label" media=" " :tooltip="result.confidence.toFixed(1)" :media-bg-color="chipColor(result.confidence)" deleteable @click="selectChip(idx)" @delete="deleteChip(idx)" />
         </div>
       </f7-block>
@@ -107,20 +105,27 @@
                 this.resultData = fakeData.testData
             },
             selectImage () {
-                this.$refs.image_chooser.click()
-                //TODO This really needs to be a promise and resolve system
-                this.imageLoaded = true;
-                var box = this.$refs.structure_box
+                var loadResult = this.$refs.image_chooser.click()
             },
             selectChip ( iChip ) {
+                var imgWidth
+                var imgHeight
+
                 this.selectedChip = iChip
-                var box = this.$refs.structure_box
-                var img = this.$refs.image_src
-                var imgWidth = img.offsetWidth
-                var imgHeight = img.offsetHeight
+                const box = this.$refs.structure_box
+                const img = this.$refs.image_src
+                var imgAspect = img.naturalWidth / img.naturalHeight
+                var rendAspect = img.offsetWidth / img.offsetHeight
+                if (imgAspect >= rendAspect) {
+                    imgWidth = img.offsetWidth
+                    imgHeight = img.offsetWidth / imgAspect
+                } else {
+                    imgWidth = img.offsetHeight * imgAspect
+                    imgHeight = img.offsetHeight
+                }
                 box.style.display = "block"
-                box.style.left = `calc( 50% - ${imgWidth/2}px + ${this.resultData.detections[iChip].left * imgWidth}px)`
-                box.style.top = `${this.resultData.detections[iChip].top * imgHeight}px`
+                box.style.left = `${(img.offsetWidth - imgWidth) / 2 + this.resultData.detections[iChip].left * imgWidth}px`
+                box.style.top = `${(img.offsetHeight - imgHeight) / 2 + this.resultData.detections[iChip].top * imgHeight}px`
                 box.style.width = `${(this.resultData.detections[iChip].right - this.resultData.detections[iChip].left) * imgWidth}px`
                 box.style.height = `${(this.resultData.detections[iChip].bottom - this.resultData.detections[iChip].top) * imgHeight}px`
             },
@@ -132,6 +137,7 @@
             getImage () {
                 var example = this.$refs.image_chooser.files[0];
                 this.imageView = URL.createObjectURL(example);
+                this.imageLoaded = true;
             }
         }
     }