Image block: resizing can lead to unexpected image attributes

[webtrainingwheels]

Image Block
I'm not sure if this is a bug or intended behaviour, but it seems odd. I stumbled upon it randomly and it was finicky to reproduce, which makes me think the behaviour is not intended.

Basically, in certain conditions, when resizing and entering image dimensions, it appears that the image is kept in proportion regardless of what you type in. That could be a good thing, but then what's odd is the HTML that is output on the front end.

Here's an example:

The image has been inserted at the proportionate size for the given width: 250 x 100 in this case.

But the height and width attributes are what were typed in the Image Dimensions field: 250 x 10

My expectation would be either:

• The image is displayed at the dimensions I typed in (no matter how insane)
  or
• The image is displayed at the correct proportionate dimensions (and as requested in other Github issues, should be indicated in the UI that this will happen), and the height and width attributes match the actual dimensions at which the image is displayed.

Also the srcset is missing in these cases as well - is that expected?

To Reproduce

Quick video to show how I reproduced the issue in a particular case:
https://jmp.sh/HlQZchi

• Insert an image block
• Use the blue dots to resize the image
• Use the Image Dimensions fields to input sizes
• Publish, then view HTML source
• Image is actually of the size 200 x 133
• Image attributes in HTML are width = 200, height = 272

**Desktop **

• MacOS High Sierra 10.13.6
• Chrome 70.0.3538.110
• WordPress 5.0.1
• Twenty Nineteen theme

[designsimply]

Tested and confirmed using WordPress 5.0.2 and Gutenberg 4.8.0 with Firefox 63.0.3 on macOS 10.13.6 and also found that the problem happens even without first using the blue dots to resize.

Steps to reproduce:

1. Add an image block.
2. Go to Settings > Block > Image Dimensions.
3. Change "Width" to "500".
4. Change "Height" to "20".
5. Note whether the height of the image changes in the editor.
6. Publish and view the post.
7. Note whether the height of the image on the front end matches the image dimensions set in the editor.

Result: the height value entered into image dimensions affects the box container in the editor, but not the image itself either in the editor or the front end.

^{Seen at https://testingallthetime.com/wp-admin/post.php?post=460&action=edit and https://testingallthetime.com/2019/01/07/resized-image/ running WordPress 5.0.2 and Gutenberg 4.8.0 using Firefox 63.0.3 on macOS 10.13.6.}

[designsimply]

After a bit more searching, I found another similar report and I would like to close this issue in favor of tracking at #12277.

Thank you for the report @webtrainingwheels!