Arbitrary nonproportional image resizing

Hello again!

When our forum was previously on Flarum, a fun thing to do was add size tags to modify the height and width of an image to stretch and squash it, like so (might be misremembering how the tag went)

I’ve tried using HTML equivalents on uploaded images with Discourse, but all this does is crop the image.

I don’t see that there’s any way to do this with uploaded images in Discourse. Am I mistaken?

When the image is large and you change the dimensions, it’s automatically cropped because of the lightbox CSS.

Even if you resize it:

Small images can be posted with the wanted aspect ratio.

image

image

Maybe there’s a very hacky way to be found, such as using an authorized class for the <img> tag, like avatar:

<img width="376" height="50" src="https://meta.discourse.org/secure-uploads/original/4X/b/e/6/be6f2ea64830fe0aaec6c192f3b39c38ce5f179c.png" class="avatar">

But it forces a border-radius.

The original is square and forces a lightbox:

If you’re an admin, I’d say the easiest way is to use a custom wrap and define a CSS rule. For example:

[wrap=ratio]
!image|500x300](upload://raEVqkaMNqIXQ9YcsiZuYefukFu.png)
[/wrap]
[data-wrap="ratio"] .lightbox-wrapper img {
    object-fit: unset;
}

This is an image of an emoji featuring a laughing face with tears. (Captioned by AI)

I wouldn’t be surprised if there was a way to force the aspect ratio as a user, though, or even an easier way as an admin. Maybe don’t even use a wrap and force unset on object-fit in a lightbox div, but that might mess up the regular layout. I don’t know.