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

[arn]

[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:

<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.

 

[Chris D]

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]

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

iOS 14: How to Enhance Speech, Movies, and Music When Listening on AirPods, AirPods Max, and Beats

Unfortunately this currently implantation doe NOT use all the various microphones on the iPhone. If you have AirPods Pro you’re better off using ambient sound directly via the headphones.

forums.macrumors.com

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

Screen Recording 2020-07-26 at 08.55 PM

Shared with Zight

share.getcloudapp.com

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

 

[XF Bug Bot]

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]

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]

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!