Add constrain proportions when modifying image size

[dingo-d]

Is your feature request related to a problem? Please describe.

When you add an image, you have the option to resize it - either manually by entering width/height, or by selecting a percentage.

When you are using manual resizing, sometimes (or maybe always) you'd want to keep the correct proportions, otherwise, your image will be squashed.

Describe the solution you'd like

A good thing to have, above or below the Image dimensions option, would be to have a checkbox that says: Constrain Proportions. In Sketch, it's denoted by a lock (I think in Adobe products as well), and Figma has that on the right side as a lock.

Describe alternatives you've considered

I didn't think of alternatives as this should be added to the core IMO.

[karmatosed]

Interesting idea @dingo-d. My first thought is that because you have the ability to change size and percentage, it might be ok to allow more macro-control without constraint here. If that's not the case, then maybe we could take a slightly different approach to an option or lock and have it auto-resize once a width is put in, then you have to over-ride the constraint? Just an option to maybe iterate here.

[dingo-d]

More granular percentage option might work, current 4 options oftentimes don't cut it.

I worry that auto-resizing, then override could be weird for users. The constraint lock is something that is widely used in design tools I think, so it's something that is known to many and seems to be a good UX.

I'd love to see more iterations on this definitely 🙂

[paaljoachim]

Constraining the image dimensions proportions is a very good idea!
Here is a quick sketch.

[kellychoffman]

A few thoughts:

The link icon is used more consistently across image editing tools. Lock could make it appear like you are unable to edit the dimensions.

The interaction should clearly be a toggle. I don't believe we have any icon toggles, but we do have the toggle bar below with text. If we draw from that, an updated design suggestion would be:

Using the current icon component, it would appear something like this, which is not as obvious but doable:

Should also include a tooltip when hovered that says "Constrain proportions".

[mtias]

Also related: #27331

[swinggraphics]

The current behavior is very confusing. If you change one value, the image resizes proportionally, but the value of the other field does not change. For example, if you start with an image that is 800x800 and change the width to 250, the image will actually be 250x250, but the Height value in the settings panel remains 800.

Edit: There's an additional bug: If you delete the value in one of the fields, it will cause an error when the block loads in the editor, outputting NaN, and causing the "This block contains unexpected or invalid content" message to appear.

[zero2webmaster]

Constrain image proportions is absolutely critical. Please add this functionality ASAP.

[mtias]

@richtabor I believe this should be done now

[richtabor]

@richtabor I believe this should be done now

Yup, as part of the aspect ratio + height/width overhaul in #51545. I'll close.