---
type: note
tags: [mine, past requirement, images, media, mask, preservation, lovable]
created: 2025-10-27T09:17:57.483Z
---# images link to original source to pop out

📸 Image Display Requirement: Full-Size Preservation with Aspect Ratio Masking

Objective: 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.

Current Issue: Images are currently cropped to fit a fixed 16:9 aspect ratio, resulting in loss of visual content outside the frame.

Remediation Strategy:

Preserve full image integrity: Do not crop or discard any part of the image.

Apply non-destructive masking: Use CSS or SVG overlays to visually mask areas outside the 16:9 viewport without altering the underlying image.

Interactive behavior:

Clicking the image opens the original, full-resolution source in a modal or new tab.

Hover or tap may optionally reveal the full image behind the mask (e.g., fade-out or zoom-out effect).

Responsive layout:

Maintain 16:9 framing for consistency across grid or card views.

Ensure masked overflow does not break layout or introduce scrollbars.

Implementation Notes:

Consider using object-fit: cover with clip-path or mask-image for elegant masking.

Ensure accessibility: alt text and keyboard navigation must remain intact.

Avoid loading full-resolution images until interaction to preserve performance.


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