Image Block rendered image in the editor doesn't match the rendered image on the frontend

[inaikem]

This issue is similar WordPress / gutenberg issues #24970, #12914 and #12277 .

Steps to replicate

A Simple site with Image blocks nested in a Columns block. Each image has been manually set to be the approximately the same height, and this is reflected in the editor just fine:

Editor page:

Direct link.

However, the preview/live page is another story:

Public view:

Direct link.

I provided CSS to fix the issue for this specific size of images (see below), and let them know the affected image (right above), is appearing on their site as part of the Stow theme's demo content and should be replaced.

As @sirreal pointed out in the Slack thread noted below, this line breaks their layout:

themes/stow/style.css

Lines 1789 to 1793 in 0100e61

	img {
	height: auto;
	max-width: 100%;
	vertical-align: middle;
	}

CSS:

/* Define fixed height for homepage 3-column block | 3529919-ZD MK */
.home .has-3-columns .wp-block-image img {
    height: 225px;
}

• User report: [#3529919-ZD]
• Slack thread-up ticket: p1606729756267500-slack-good-mountain