Add image scaling to lightboxes

Harshithrequested to merge
gitlab-community/gitlab-org/gitlab:573756-add-image-scaling into master

What does this MR do and why?

Adds zoom functionality to the image lightbox with controls for zooming in/out and keyboard shortcuts, allowing users to view images at up to 400% zoom even when they exceed the viewport.

Changes

  • Modified image_lightbox.vue:
    • Added zoom controls using the design_scaler component
    • Implemented dynamic scale-to-fit calculation based on container dimensions
    • Made image container scrollable when zoomed beyond viewport
  • Updated design_scaler.vue:
    • Made component flexible to work with externally-defined zoom levels (was fixed earlier)
    • Added support for custom current scale and min/max scale values

Zoom Behaviour

  • Zoom levels: 10% → 50% → [Scale-to-fit] → 100% → 200% → 400%
  • Starting zoom: Scale-to-fit (automatically calculated)
  • Min zoom: 10%
  • Max zoom: 400%

References

Screenshots or screen recordings

Before After
image.png image.png
image.png

How to set up and validate locally

Create an Issue

Paste an image and click on it

MR acceptance checklist

Related to #573756

cc @nickleonard

Edited by Harshith

Merge request reports