diff --git a/src/components/Images.vue b/src/components/Images.vue
index dd07e1441..971b3bb80 100644
--- a/src/components/Images.vue
+++ b/src/components/Images.vue
@@ -18,7 +18,8 @@
 				:class="{
 					dragging,
 					loaded,
-					zoomed: zoomRatio > 1
+					zoomed: zoomRatio > 1,
+					embedded: isEmbedded
 				}"
 				:src="data"
 				:style="imgStyle"
@@ -36,7 +37,8 @@
 					:class="{
 						dragging,
 						loaded,
-						zoomed: zoomRatio > 1
+						zoomed: zoomRatio > 1,
+						embedded: isEmbedded
 					}"
 					:style="imgStyle"
 					:playsinline="true"
@@ -134,6 +136,10 @@ export default {
 			return this.basename
 		},
 		imgStyle() {
+			// let CSS size the element instead of forcing dimensions in JS
+			if (this.isEmbedded) {
+				return {}
+			}
 			if (this.zoomRatio === 1) {
 				return {
 					height: this.zoomHeight + 'px',
@@ -492,6 +498,14 @@ img, video {
 		transition: none !important;
 		cursor: move;
 	}
+
+	&.embedded {
+		max-width: 100%;
+		max-height: 100%;
+		width: auto;
+		height: auto;
+		object-fit: contain;
+	}
 }
 
 .live-photo_play_button {
diff --git a/src/mixins/Mime.js b/src/mixins/Mime.js
index 7e530190d..6e022b06d 100644
--- a/src/mixins/Mime.js
+++ b/src/mixins/Mime.js
@@ -85,6 +85,11 @@ export default {
 			type: Number,
 			default: undefined,
 		},
+		// is the component mounted outside of the viewer modal?
+		isEmbedded: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {
@@ -157,6 +162,11 @@ export default {
 		 * based on the viewer maximum size
 		 */
 		updateHeightWidth() {
+			// let CSS size the element when mounted outside of the viewer modal
+			if (this.isEmbedded) {
+				return
+			}
+
 			const modalWrapper = this.$parent.$el.querySelector('.modal-wrapper')
 			if (modalWrapper && this.naturalHeight > 0 && this.naturalWidth > 0) {
 				const modalContainer = modalWrapper.querySelector('.modal-container')