Change Details

At the moment if an image is too wide it is scaled down, and if it's too high it's not possible to scroll to the bottom of it without also scrolling to the bottom of the form (i.e. possibly away from the form fields that are being used). The image should be constrained to a box, and be initially shown zoomed so that it's all visible. It should be possible to zoom in, and pan around the image.

=== User story As a user, I would like to be able to zoom and pan images which have small text in order to be able to translate them more easily. At the moment if an image is too wide it is scaled down, and if it's too high it's not possible to scroll to the bottom of it without also scrolling to the bottom of the form (i.e. possibly away from the form fields that are being used). === Requirements * The image should be constrained to a box, and be initially shown completely so that it's all visible. * It should be possible to zoom in, and pan around the image with zoom indicators (+/-) visible on the image when user hovers over it. * Use [Leaflet](https://leafletjs.com/index.html) library, per discussion in comments. === Needs QA? Yes.

=== User story As a user, I would like to be able to zoom and pan images which have small text in order to be able to translate them more easily. At the moment if an image is too wide it is scaled down, and if it's too high it's not possible to scroll to the bottom of it without also scrolling to the bottom of the form (i.e. possibly away from the form fields that are being used). === Requirements * The image should be constrained to a box, and be initially shown zoomedcompletely so that it's all visible. * It should be possible to zoom in, It should be possible to zoom inand pan around the image with zoom indicators (+/-) visible on the image when user hovers over it. * Use [Leaflet](https://leafletjs.com/index.html) library, and pan around the image.per discussion in comments. === Needs QA? Yes.