Full sized images have the wrong aspect ratio

[bobbingwide]

In the FAQ "Do I need to define image sizes?" https://s.b/wp55/thisis/2021/04/28/do-i-need-to-define-image-sizes/

I inserted the same image 4 times with different sizes. The HTML for the full size image was:

<figure class="wp-block-image size-full"><img loading="lazy" width="1936" height="1936" src="https://s.b/wp55/thisis/wp-content/uploads/sites/15/2021/04/Fuzzy-Duck-I-could-get-into-this.jpg" alt="" class="wp-image-168" srcset="https://s.b/wp55/thisis/wp-content/uploads/sites/15/2021/04/Fuzzy-Duck-I-could-get-into-this.jpg 1936w, https://s.b/wp55/thisis/wp-content/uploads/sites/15/2021/04/Fuzzy-Duck-I-could-get-into-this-300x300.jpg 300w, https://s.b/wp55/thisis/wp-content/uploads/sites/15/2021/04/Fuzzy-Duck-I-could-get-into-this-1024x1024.jpg 1024w, https://s.b/wp55/thisis/wp-content/uploads/sites/15/2021/04/Fuzzy-Duck-I-could-get-into-this-150x150.jpg 150w, https://s.b/wp55/thisis/wp-content/uploads/sites/15/2021/04/Fuzzy-Duck-I-could-get-into-this-768x768.jpg 768w, https://s.b/wp55/thisis/wp-content/uploads/sites/15/2021/04/Fuzzy-Duck-I-could-get-into-this-1536x1536.jpg 1536w" sizes="(max-width: 1936px) 100vw, 1936px"><figcaption>Image size: Full size</figcaption></figure>

the image was stretched vertically. This inline CSS for the block was

<style id='wp-block-image-inline-css' type='text/css'>
.wp-block-image{margin:0 0 1em}.wp-block-image img{max-width:100%;}.wp-block-image:not(.is-style-rounded) img{border-radius:inherit}.wp-block-image.aligncenter{text-align:center}.wp-block-image.alignfull img,.wp-block-image.alignwide img{width:100%}.wp-block-image .aligncenter,.wp-block-image .alignleft,.wp-block-image .alignright{display:table}.wp-block-image .aligncenter>figcaption,.wp-block-image .alignleft>figcaption,.wp-block-image .alignright>figcaption{display:table-caption;caption-side:bottom}.wp-block-image .alignleft{float:left;margin:.5em 1em .5em 0}.wp-block-image .alignright{float:right;margin:.5em 0 .5em 1em}.wp-block-image .aligncenter{margin-left:auto;margin-right:auto}.wp-block-image figcaption{margin-top:.5em;margin-bottom:1em}.wp-block-image.is-style-circle-mask img,.wp-block-image.is-style-rounded img{border-radius:9999px}@supports ((-webkit-mask-image:none) or (mask-image:none)) or (-webkit-mask-image:none){.wp-block-image.is-style-circle-mask img{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');mask-mode:alpha;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;border-radius:0}}
</style>

I needed to add height: auto to

.wp-block-image img{max-width:100%;}

What's more challenging is to make the block wide or full width.

[bobbingwide]

size-large images were also vertically stretched.

[bobbingwide]

TT1 blocks has the following CSS in https://github.com/WordPress/theme-experiments/blob/08b86b02dfa6a594ab501060aa0551fbaa01ae62/tt1-blocks/assets/css/blocks.css#L62

.wp-block-image img,
.wp-block-image img {
    height: auto;
}

Not sure why it's specified twice!