Click on any image to open the lightbox. Captions are shown below the image.
Wide landscape image — the lightbox should constrain width to 90vw.
Wide landscape: should never overflow the viewport horizontally.
Tall portrait image — the lightbox should constrain height to 80dvh.
Tall portrait: should fit within the viewport height.
Image with a long caption — the caption scrolls independently; the image is unaffected.
This is a deliberately long caption to test the scrollable caption area in the lightbox. When a caption exceeds approximately four lines of text it should begin scrolling within its own container, leaving the image completely undisturbed above it. You are reading line three now — the scroll threshold should be approaching. Here is the fifth line, which should be hidden behind the scroll boundary and only visible after scrolling down within the caption area itself.
Image without a caption — no caption area should appear.
Can someone explain
Grid layout with a mix of aspect ratios.
Wide landscape: should never overflow the viewport horizontally.Tall portrait: should fit within the viewport height.This is a deliberately long caption to test the scrollable caption area in the lightbox. When a caption exceeds approximately four lines of text it should begin scrolling within its own container, leaving the image completely undisturbed above it. You are reading line three now — the scroll threshold should be approaching. Here is the fifth line, which should be hidden behind the scroll boundary and only visible after scrolling down within the caption area itself.boat shot at night
Mixed carousel with wide, portrait, and captioned images.
Wide landscape: should never overflow the viewport horizontally.
Tall portrait: should fit within the viewport height.
This is a deliberately long caption to test the scrollable caption area in the lightbox. When a caption exceeds approximately four lines of text it should begin scrolling within its own container, leaving the image completely undisturbed above it. You are reading line three now — the scroll threshold should be approaching. Here is the fifth line, which should be hidden behind the scroll boundary and only visible after scrolling down within the caption area itself.
