@hoangyell/gallery 1.0.5 → 1.0.6

package/README.md

@@ -27,6 +27,7 @@
 ## Features
 
 - **Pyramid layout** — distribute images across rows with `rows` prop
+- **Two fit modes** — `cover` (default, uniform photo grid) or `contain` (natural aspect, for diagrams and tall portraits)
 - **Lightbox** — click to open, keyboard arrows, swipe, ESC to close
 - **Corner rounding** — only the four outer corners of each group are rounded
 - **Hover zoom** — image scales inside its cell without changing layout
@@ -79,9 +80,36 @@ import { Gallery } from "@hoangyell/gallery";
 | `rows` | `number` | auto (~3 per row) | Number of visual rows |
 | `orientation` | `"landscape" \| "portrait"` | `"landscape"` | Item aspect ratio hint |
 | `scale` | `number` | `1` | Gallery width scale (0–1) |
-| `fit` | `ObjectFit` | `"cover"` | Default CSS object-fit |
+| `fit` | `ObjectFit` | `"cover"` | Default CSS object-fit — see Fit modes below |
 | `class` | `string` | — | Extra wrapper class |
 
+## Fit modes
+
+The `fit` prop controls **both** the image's `object-fit` **and** the
+container's aspect ratio. Pick the right one for your content:
+
+| Mode | What you get | When to use |
+|---|---|---|
+| `"cover"` (default) | Uniform 4:3 grid (1:1 on mobile). Images are cropped to fill. | Photo galleries — travel, products, faces. The Pinterest aesthetic. |
+| `"contain"` | Container hugs each image's natural aspect ratio. No cropping. | Diagrams, charts, screenshots, comics, tall portraits. |
+
+Set it at the gallery level:
+
+```mdx
+<Gallery items={["/diagram.png"]} rows={1} fit="contain" />
+```
+
+Or per-item (mix and match in the same gallery):
+
+```mdx
+<Gallery
+  items={[
+    "/cover-photo.jpg",
+    { src: "/architecture-diagram.png", fit: "contain" },
+  ]}
+/>
+```
+
 ## Dark mode
 
 The component auto-themes via three mechanisms (last one wins):

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoangyell/gallery",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Astro image gallery with lightbox, pyramid multi-row layout, and accessible controls.",
   "license": "MIT",
   "type": "module",

package/src/Gallery.astro

@@ -100,6 +100,7 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
       class={`hy-gallery ${className}`}
       data-hy-gallery
       data-orientation={orientation}
+      data-fit={fit}
       style={scale !== 1 ? `width: ${scale * 100}%; margin: 2rem auto;` : undefined}
     >
       {groupedItems.map((group, rowIdx) => {
@@ -124,6 +125,7 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
                   class={`hy-gallery-item ${cornerClasses}`}
                   data-zoom-src={item.src}
                   data-alt={item.alt}
+                  data-fit={item.fit}
                   aria-label={
                     item.alt ? `View full size: ${item.alt}` : "View full size image"
                   }
@@ -263,6 +265,16 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
     }
   }
 
+  /* fit="contain" — show the whole image at its natural aspect ratio.
+     Drops the forced 4:3 / 1:1 container so diagrams, charts, screenshots,
+     and tall portraits render fully without cropping or letterboxing.
+     Applied either at the wrapper (global) or per-item via data-fit. */
+  .hy-gallery[data-fit="contain"] .hy-gallery-item,
+  .hy-gallery .hy-gallery-item[data-fit="contain"] {
+    aspect-ratio: auto;
+    background: transparent;
+  }
+
   .hy-gallery-img {
     position: absolute;
     inset: 0;
@@ -279,6 +291,16 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
+  /* In contain mode the image is the primary content — let it drive height
+     instead of being absolutely positioned inside a fixed-aspect box. */
+  .hy-gallery[data-fit="contain"] .hy-gallery-img,
+  .hy-gallery .hy-gallery-item[data-fit="contain"] .hy-gallery-img {
+    position: static;
+    width: 100%;
+    height: auto;
+    inset: auto;
+  }
+
   .hy-gallery-item:hover .hy-gallery-img,
   .hy-gallery-item:focus-visible .hy-gallery-img {
     will-change: transform;