Allow Alloy Editor to set one dimension when resizing an image

• Type: Feature Request
• Status: Under Review
• Priority: Minor
• Resolution: Unresolved
• Affects Version/s: None
• Fix Version/s: None
• Component/s: Alloy Editor
• Labels: None

User Story:

As a developer, integrating Alloy Editor, I'd like a configuration option, to allow me to set image dimensions with width|height|both.

This would allow me better control, in how image scaling behaves in the resulting output. Without resorting to !important overrides.

Background:

See discussion: https://in.liferay.com/web/support/forums/-/message_boards/message/25343702

When resizing an image's height or width or both, height and width dimensions are set as inline styles on the image element.

When the resulting output image is displayed in a container smaller than the set static width, the image breaks out of the container.

This is typically fixed by setting max-width: 100% on the image, forcing it to resize.

An issue arises, that because height is set, the original ratio is not kept, causing the image to squish.

To further fix this, height must to set to auto, to allow the original ratio to remain intact. But because height as be set as an inline style, !important must be used to override the inline height.