Image Placeholders not honoring image resizing

[Dogway]

Bug Description

An average color of the image is shown automatically as the background of the image widget (at least in Elementor) when size is not Fill.

Steps to reproduce

Add an Image widget in Elementor
Resize the image via max-width or height in the Style tab.
Check the image in the homepage, the sides will show a background color depending on the aspect ratio of the image widget.

Screenshots

Additional Context

• PHP Version: 8.4.19
• OS: Windows 11
• Browser: Chrome 146.0.7680.165
• Plugin Version: 1.0.0-beta5
• Device: PC

[b1ink0]

I was able to replicate this issue on the TT5 theme using the core Image block.

When the image dimensions are fixed and the scale is set to contain, it applies object-fit: contain. If a custom aspect ratio is also set, the image does not fully fill the width of the img element. As a result, empty space becomes visible around the image.

Since the image placeholder sets a background color based on the dominant color, this background becomes visible in that empty space.

At the moment, the only solution I can think of is to use JavaScript to remove the background color once the image has fully loaded.

[westonruter]

Yes, using JS would work well: https://codepen.io/editor/westonruter/pen/019d4974-864c-736f-8492-55b14b18e7e9

Adding this to the page would do it:

document.addEventListener(
  "load",
  (event) => {
    if (
      event.target instanceof HTMLImageElement &&
      event.target.hasAttribute("data-dominant-color")
    ) {
      event.target.style.removeProperty("--dominant-color");
    }
  },
  { capture: true },
);

Additionally, if scripting is not enabled, it would probably be good to prevent the style from being applied in the first place with a container style query, to detect when the IMG has object-fit: contain. This is not yet supported by browsers, however.