Html – Autoscaling img, when user changes font size in browser

When a user changes the font size setting in a browser, 1rem stops being 16px. For instance, in Chrome “Very large” means 1rem == 24px, or 150% of normal font size:

I want in this case all <img>s to be proportionally up-scaled (i.e. 150%), because all my layout is rem-based. Using JS, I could calc the factor:

const k = parseFloat(getComputedStyle(document.documentElement).fontSize) / 16;

and apply it for each <img>. But if the user changes the size when my page is already loaded, the page layout will be broken.

Can this be done in pure CSS or, maybe, using attributes, so the browser up-scales the <img>s automatically?

UPD If there is an event of changing the font size in a browser, I could handle it and set a CSS variable for up-scaling:

img.auto-scale
{
    zoom: var(--font-size-factor);
}