Won't fix Can't specify both height and width of images

[Brettflan]

Affected version

2.2.2

As an example, this image below is natively 5px by 250px. It has been sized to 8px by 80px in the post editor, and shows up like that in the editor window. But below, you'll see it is much taller than the specified 80px in the actual post.

[IMG width="8px" height="80px"]https://imgur.com/cqEqe7U.png[/IMG]

However, in the Preview and in the actual rendered post afterwards, the style of the image only specifies the width, not the height. Example output HTML, note the style:

<img src="https://imgur.com/cqEqe7U.png" data-url="https://imgur.com/cqEqe7U.png" class="bbImage" data-zoom-target="1" style="width: 8px" alt="" title="" loading="lazy" width="8" height="80">

The HTML IMG attributes do specify both width and height, but not in the style.
And as you can see in this post, it is being shown with the correct width, but not the correct height.

 

[Mike]

This is a side effect of this bug fix:

Fixed - IMG Height and Width tags don't allow for responsive images

When width and height are specified, XF generates this code: It specifies width and height in a style tag, rather than the normal image width and height. This prevents the image from being responsive. The tag width and height should be used. Try shrinking this browser window and see how...

xenforo.com

I actually mentioned it at the time as a trade off, though I would still contest that in most cases, the current behavior is preferable.

The previous behavior led to images being displayed in non-standard ratios unexpectedly. Notably, if you had a large image and dimensions were specified for it, when viewed on a small device, you'd generally end up with a situation where the width was limited as expected, but the height would still be the full height. So you could have started with an image that was 1200x600 displayed as 300x600 rather than the expected 300x150.

It's worth mentioning that the image drag handles in the RTE don't allow you to drag to non-native aspect ratios. It requires manually entering the values, though I do acknowledge that it'd be ideal if the RTE matched the behavior in the post in this case. However, it's unlikely that will be something we can easily tweak.

So as it stands, I'm going to say that this isn't something we're going to change as the trade off is, IMO, a net negative.

 

[briansol]

With CLS in mind, i'd argue that height is more important than width (assuming a block level image with 'enters/line breaks' around it)

Can we keep the trade off, but use height instead of width?

 

[Brettflan]

For reference, we have several unhappy game clan and tournament organizers who like to have really fancy table layouts for their main posts, with stretched images used as part of the structure and design of those posts, and so there are a lot of messed up complicated posts from our update from XenForo 2.1.12 to XenForo 2.2.2 as a result of this.
Eh, I suppose I understand the reasoning behind this, but the fact that it is forced without any indication of it, and the fact that it is not reflected in the standard post editor (only the Preview and resulting post) is a nuisance. Also the fact that it makes non-linear image scaling impossible, unless I'm missing something.

 

[briansol]

New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly

Maintaining aspect ratio within images and elements is now easier to achieve with the new aspect-ratio CSS property.

web.dev

@Mike , check this out