diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx
index 8dbab1ce36..e972f59295 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx
@@ -116,6 +116,7 @@ export const RefImagePreview = memo(() => {
         ref={dndRef}
         position="relative"
         h="full"
+        aspectRatio="1/1"
         flexShrink={0}
         opacity={isDragging ? 0.3 : 1}
         data-ref-image-id={id}
@@ -143,7 +144,15 @@ export const RefImagePreview = memo(() => {
     );
   }
   return (
-    <Box ref={dndRef} position="relative" h="full" flexShrink={0} opacity={isDragging ? 0.3 : 1} data-ref-image-id={id}>
+    <Box
+      ref={dndRef}
+      position="relative"
+      h="full"
+      aspectRatio="1/1"
+      flexShrink={0}
+      opacity={isDragging ? 0.3 : 1}
+      data-ref-image-id={id}
+    >
       <Tooltip label={warnings.length > 0 ? <RefImageWarningTooltipContent warnings={warnings} /> : undefined}>
         <Flex
           position="relative"