How do I set the size of an image explicitly?

[pavel-kirienko]

I insert an image into my MyST document with an explicit height specification as follows:

<img alt="EMF" height="300px" src="../figures/x8016s-vdiffab-ia.png"/>

In the rendered HTML, I see that the height attribute is present, but it is ignored because Furo sets the height CSS property to auto. I can override it in my custom CSS file but there appears to be no way to make the browser just use the height specified in the HTML attribute (unset or inherit are ineffective). The image takes the right size only if I manually deactivate the property in the developer's tools:

How do I specify the height of an image?

[pavel-kirienko]

Solved with custom styles in my custom.css:

img.height-100px {
    height: 100px;
}
/* ... */
img.height-500px {
    height: 500px;
}

Then define the image as:

<img alt="EMF" src="../figures/x8016s-vdiffab-ia.png" class="height-300px"/>