diff --git a/packages/widgets/src/immich/album-carousel/component.module.css b/packages/widgets/src/immich/album-carousel/component.module.css
index ab23cb8ec..e0c0393a6 100644
--- a/packages/widgets/src/immich/album-carousel/component.module.css
+++ b/packages/widgets/src/immich/album-carousel/component.module.css
@@ -14,6 +14,11 @@
   background-color: var(--mantine-color-gray-8);
 }
 
+.carouselImage[data-fit="contain"] {
+  object-fit: contain;
+  background-color: var(--mantine-color-black);
+}
+
 .photoInfo {
   position: absolute;
   bottom: 0;
diff --git a/packages/widgets/src/immich/album-carousel/component.tsx b/packages/widgets/src/immich/album-carousel/component.tsx
index a0bb5f416..6d1593afd 100644
--- a/packages/widgets/src/immich/album-carousel/component.tsx
+++ b/packages/widgets/src/immich/album-carousel/component.tsx
@@ -153,7 +153,12 @@ function Carousel({
   return (
     <Stack w="100%" h="100%" gap={0}>
       <Box w="100%" style={{ flex: 1, minHeight: 0 }} className={classes.carouselContainer}>
-        <Image src={currentAsset.publicLink} alt={t("albumPhoto")} className={classes.carouselImage} />
+        <Image
+          src={currentAsset.publicLink}
+          alt={t("albumPhoto")}
+          className={classes.carouselImage}
+          data-fit={advanced ? "contain" : "cover"}
+        />
 
         {assets.length > 1 && (
           <Group
@@ -219,7 +224,7 @@ function Carousel({
       {advanced && (
         <ScrollArea type="never" scrollbarSize={0} px="xs" py={6}>
           <Group gap={6} wrap="nowrap">
-            {assets.slice(0, 24).map((asset, index) => (
+            {assets.map((asset, index) => (
               <UnstyledButton
                 key={asset.id}
                 onClick={() => setCurrentIndex(index)}