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

arn

Well-known member


Code:
[IMG width="1000px" height="666px"]https://images.macrumors.com/article-new/2019/10/Apple_AirPods-Pro_Lifestyle_102819.jpg[/IMG]

When width and height are specified, XF generates this code:

Code:
<img src="/community/proxy.php?image=https%3A%2F%2Fimages.macrumors.com%2Farticle-new%2F2019%2F10%2FApple_AirPods-Pro_Lifestyle_102819.jpg&amp;hash=2cba0b2d94a5a1d0287ae94da42968df" data-url="https://images.macrumors.com/article-new/2019/10/Apple_AirPods-Pro_Lifestyle_102819.jpg" class="bbImage" data-zoom-target="1" style="width: 1000px; height: 666px" alt="" width="" height="" loading="lazy">

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 <img> tag width and height should be used.

Try shrinking this browser window and see how the image scales.
 
Last edited:

Chris D

XenForo developer
Staff member
If width but no height is specified then the image keeps its natural aspect ratio. What are the circumstances where you would want to specify both the width and the height, rather than just the width?
 

arn

Well-known member
How I ended up here was I was going down a path of trying to improve page-reflow when someone is linked into a specific post. I noticed in particular, our large images in the first post would result in reflow causing things to jump around.

Link to post #2

Now, we are using Xon's Lazy Load add-on... so that's the reason why. But with these article images, we do have width and height so I thought I'd be easy just to include those in the tags -- that's when I ran into the issue above.

I thought it might affect XF 2.2 too due to the new loading=lazy tags -- but it doesn't seem as dramatic in Chrome. Seems Chrome does a pretty good job with anchor links, and seems to be load images pretty aggressively... so it's harder to tell.

Firefox seems to be closer to how Safari behaves. And if you do get jumped down and scroll up to embedded images, there is reflow with the loading=lazy tags


Sample link: https://xenforo.com/community/threads/lazy-load.183280/post-1447334
 

XF Bug Bot

XenForo bug fixer bot
Staff member
Thank you for reporting this issue, it has now been resolved. We are aiming to include any changes that have been made in a future XF release (2.2.0 RC1).

Change log:
When a width and height is specified for an [IMG], use them for intrinsic sizing to prevent layout shifts.
There may be a delay before changes are rolled out to the XenForo Community.
 

Mike

XenForo developer
Staff member
Just to expand a little bit, there is a bit of a caveat with this change, in that to support preventing reflows while still allowing responsive behaviors, specifying both dimensions can no longer to be used to squish an image into a non-standard ratio. The potential benefits for the most common cases seems to outweigh that limitation IMO.
 

arn

Well-known member
Just to expand a little bit, there is a bit of a caveat with this change, in that to support preventing reflows while still allowing responsive behaviors, specifying both dimensions can no longer to be used to squish an image into a non-standard ratio. The potential benefits for the most common cases seems to outweigh that limitation IMO.
Seems like a good tradeoff! 👍
 
Top