Add height: auto; to img tag in preflight

[adevade]

Right now it's just set to max-width: 100%, and without the height: auto browsers can behave differently.

[adamwathan]

Totally open to adding this but do you mind sharing a specific browser that handles it differently?

[benface]

The initial value of the height property is already auto and I doubt any user agent stylesheet is changing that for img.

[adevade]

Well, here's an example I ran into today in Chrome.

Without height: auto

With height: auto

In this case some WordPress-plugin was adding inline styles to the image, but adding height: auto to img still worked.

I've always added this to my CSS resets, and so does Bulma, Bootstrap and Foundation

Like it says in the Bootstrap comment, it's for when you're setting width and height attributes directly on the image. Or something like that. However, this fixes it.

[tigt]

Here's a reduced test case showing why this is important: codepen.io/tigt/pen/e021a5e627e70ae26b0a449ef8bf38b1

Setting the width and height attributes is a performance boost because it lets browsers lay out the page before image metadata downloads. Most CMS’s set those attributes for that reason.

[benface]

Ah, that makes sense. HTML's width and height attributes take precedence over the user agent stylesheet (which sets height: auto), but any author stylesheet takes precedence over them, which is why height: auto needs to be re-specified there.

[benface]

That said, I would imagine the "performance boost" is nil when the actual dimensions of the image on the screen end up being different from the ones specified in HTML, which is the case if the image is scaled down due to max-width: 100%. But it's still a good practice to specify them (unless srcset and sizes are used and you're relying on sizes to set the image's size instead of CSS, in which case it seems width and height interfere: https://stackoverflow.com/questions/37125773/what-do-the-width-and-height-attributes-do-when-using-srcset-and-sizes).