Styling stretches inline images instead of scaling them

This comes from https://github.com/mdn/yari/issues/1734#issuecomment-731337332

If you have

<p>
<img alt="The default styles used by a browser" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc">
</p>

It looks good: on http://localhost:3000/en-US/docs/Learn/CSS/First_steps/What_is_CSS

But if you correctly set the image width and height attributes:

<p>
<img height="594" width="1385"
alt="The default styles used by a browser" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc"
>
</p>

then this happens:

Having the height set is good because it means the browser doesn’t need to shift all the stuff below it as the image loads. This causes CLS (Cumulative Layout Shift) which is bad for our Web Perf metrics which could affect our SEO. And just generally make people less happy consuming the content.

Is there not a way to do the CSS so that images are allowed to have their correct size set but “scale” it so it displays as well as it can?

[chrisdavidmills]

Looks like the dimensions are not being set correctly, so that the aspect ratio is incorrect.

If you only set the width, the height is usually adjusted proportionately so the aspect ratio is maintained, and I think it still gives you a box to help avoid CLS. Would that work?

[peterbe]

I love it! Thanks to everyone involved! Now we have the ideal solution. If you set height="594" width="1385" on the <img tag there, you get this: It’s hard to tell but thanks to the height tag on the <img the browser doesn’t do any layout shift whilst waiting for the image.

Now I need to write that piece of code that opens the image, gets its width and height and uses the Cheerio instance to set it based on the binary image size (there’s a node lib for that).