fix: resize episode preview image (#842)

Fallenbagel · Jun 26, 2024 · 96ba53f · 96ba53f
1 parent f714132
commit 96ba53f
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git a/src/components/TvDetails/Season/index.tsx b/src/components/TvDetails/Season/index.tsx
@@ -56,12 +56,14 @@ const Season = ({ seasonNumber, tvId }: SeasonProps) => {
                   {episode.overview && <p>{episode.overview}</p>}
                 </div>
                 {episode.stillPath && (
-                  <Image
-                    className="h-auto w-full rounded-lg xl:h-32 xl:w-auto"
-                    src={`https://image.tmdb.org/t/p/original/${episode.stillPath}`}
-                    alt=""
-                    fill
-                  />
+                  <div className="relative aspect-video xl:h-32">
+                    <Image
+                      className="rounded-lg object-contain"
+                      src={`https://image.tmdb.org/t/p/original/${episode.stillPath}`}
+                      alt=""
+                      fill
+                    />
+                  </div>
                 )}
               </div>
             );

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -63,6 +63,27 @@ module.exports = {
         },
       }),
     },
+    aspectRatio: {
+      auto: 'auto',
+      square: '1 / 1',
+      video: '16 / 9',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+      13: '13',
+      14: '14',
+      15: '15',
+      16: '16',
+    },
   },
   plugins: [
     require('@tailwindcss/forms'),