diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 4a2b9d0a..e5ff863b 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -497,4 +497,30 @@ span.state-transition-arrow.lazy {
   max-height: 100%;
   max-width: 100%;
 }
+
+.preview-container {
+  align-items: center;
+  background-color: var(--color-background);
+  border-radius: var(--border-radius);
+  display: flex;
+  height: 0;
+  justify-content: center;
+  overflow: hidden;
+  padding-top: 56.25%;
+  position: relative;
+}
+
+.preview-container div:first-child {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.preview-container img {
+  max-height: 100%;
+  max-width: 100%;
 }
diff --git a/web/app/src/components/jobs/JobDetails.vue b/web/app/src/components/jobs/JobDetails.vue
index 9ced29ce..afee208d 100644
--- a/web/app/src/components/jobs/JobDetails.vue
+++ b/web/app/src/components/jobs/JobDetails.vue
@@ -1,6 +1,9 @@
 <template>
   <template v-if="hasJobData">
-    <last-rendered-image ref="lastRenderedImage" :jobID="jobData.id" thumbnailSuffix="-tiny" />
+    <div class="preview-container">
+      <last-rendered-image ref="lastRenderedImage" :jobID="jobData.id" thumbnailSuffix="-small" />
+    </div>
+
     <TabsWrapper @clicked-job-details-tab="$emit('reshuffled')">
       <TabItem title="Job Settings">
         <dl v-if="hasSettings">