---
type: note
tags: [mine, past requirement, images, media, mask, preservation, lovable]
created: 2025-11-06T02:51:46.190Z
updated: 2025-11-15T20:19:56.787Z
---# images link to original source to pop out

📸 Image Display Requirement: Full-Size Preservation with Aspect Ratio Masking\n\nObjective: Ensure that all displayed images link to their original source and open in full size when clicked, while preserving the full image content in the UI without destructive cropping.\n\nCurrent Issue: Images are currently cropped to fit a fixed 16:9 aspect ratio, resulting in loss of visual content outside the frame.\n\nRemediation Strategy:\n\nPreserve full image integrity: Do not crop or discard any part of the image.\n\nApply non-destructive masking: Use CSS or SVG overlays to visually mask areas outside the 16:9 viewport without altering the underlying image.\n\nInteractive behavior:\n\nClicking the image opens the original, full-resolution source in a modal or new tab.\n\nHover or tap may optionally reveal the full image behind the mask (e.g., fade-out or zoom-out effect).\n\nResponsive layout:\n\nMaintain 16:9 framing for consistency across grid or card views.\n\nEnsure masked overflow does not break layout or introduce scrollbars.\n\nImplementation Notes:\n\nConsider using object-fit: cover with clip-path or mask-image for elegant masking.\n\nEnsure accessibility: alt text and keyboard navigation must remain intact.\n\nAvoid loading full-resolution images until interaction to preserve performance.


---
**Keywords:** mine, past requirement, images, media, mask, preservation, lovable
