I'm having some trouble reusing the umbImageCrop directive (umb-image-crop) in a responsive manner. I'm wondering if anyone has used this in something they've done and could point me to what I'm doing wrong to ensure the resulting viewport maintains the aspect ratio of the crop.

(Please someone from HQ update this text editor so we can paste screenshots from our clipboard. Happy to contribute to that endeavor I've had to write the code multiple times.)

<umb-image-crop 
src="model.images[0].image"
crop="model.crop"
width="{{model.cropSize.width}}"
height="{{model.cropSize.height}}"></umb-image-crop>

Here the values end up being something like:

• Src is the image source.
• Crop is an object containing x1, x2, y1, and y2 (all null to begin)
• Width depends on the aspect ratio I've defined elsewhere, but lets say this is 1920.
• Height same as width, but lets say this value is 1080.

When the image width above is larger than the dialog width...

• The width of the viewport (including the semi-opaque margin) is reduced so that it fits inside of the dialog. This is to prevent scrolling on the x-axis. Makes sense.
• The height of the viewport remains true to the height value assigned. That's to say - the height is not automatically adjusted for the new width dimension. The result is a viewport that is not true to the original aspect ratio (width/height).
• Further, the image cropper holds true to the width value. So you may fight trying to scroll the image further to the left and think to yourself "this isn't working" when actually it's the viewport that's the problem (you've scrolled the image to the far-right constraint already).

What does the max-size attribute do anyways?

Well, if we use the max-size attribute it constrains both the width and height value. The problem is there's no way to simply say "the max size should be dependent on the available width". I can't say "100%" here. I have to give it a specific number.

Temporary fix - I'll use the max-size attribute...

For now I'll use the max-size attribute... But there must be something I've missed? If there is indeed no way to force responsiveness, would HQ mind if I updated this directive to include an optional parameter to allow true responsiveness?

Some of the files I've been referencing:

1. umbimagecrop.directive.js
2. umb-image-crop.html