Opening an existing (Classic Editor) page in Gutenberg distorts images

[maddisondesigns]

Issue Overview

When opening up a page in Gutenberg that has been created with the Classic Editor, the content is added to a Classic Editor block. Large images are shown distorted and do not keep the correct ratio.

As an example, the third image is 1240 x 930px. When imported into a Gutenberg block, the width is squished to fit the width of the block but the height is kept the same, making the image appear at 608 x 930px.

This is the image that was distorted

.gutenberg__editor img needs to include height: auto;

.gutenberg__editor img {
    max-width: 100%;
    height: auto;
}

Steps to Reproduce (for bugs)

1. Create new page using the Classic Editor
2. Insert dummy content including a large image (mine was 1240 x 930)
3. Publish page
4. Open page in Gutenberg
5. View distorted image

Expected Behavior

Images should display in the editor at the correct ratio. If the width is decreased to fit the width of the block, the height should decrease as well.

Current Behavior

Wide images are distorted.

Firefox Quantum 58.0.1 (64-bit)
Gutenberg 2.1.0
WordPress 4.9.2

[jasmussen]

Closing as fixed by #4752