fix: fit image to a slide height

JankariTech · Apr 15, 2024 · 9cfa6ef · 9cfa6ef
1 parent 0e453d1
commit 9cfa6ef
Showing 1 changed file with 28 additions and 1 deletion.
diff --git a/src/App.vue b/src/App.vue
@@ -5,7 +5,7 @@
     :class="{ 'dark-mode': isDarkMode }"
   >
     <div class="reveal">
-      <div ref="slideContainer" class="slides">
+      <div ref="slideContainer" id="slideContainer" class="slides">
         <section
           :data-markdown="url"
           :data-separator="dataSeparator"
@@ -169,4 +169,31 @@ async function getBlobUrl(url: string) {
     }
   }
 }
+
+#slideContainer {
+  section {
+    display: flex !important;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+
+    > * {
+      margin-top: 0;
+    }
+
+    p:has(img) {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      overflow: hidden;
+
+      img {
+        width: auto;
+        height: auto;
+      }
+    }
+  }
+}
 </style>