[SOLVED] Is it possible to use calc() inside transform:scale()?

Is it possible to use calc() inside transform:scale()?

I have an iframe with a banner advert in it (Amazon affiliate link) and I'd like to make the banner responsive. In the UK Amazon don't offer a responsive banner (their US programme does).

My thought was to add this CSS to the iframe tag:

transform:scale(calc(100% / 728px));

or similar.

If I try it with unitless numbers it works. E.g. calc(0.1 + 0.4) will indeed scale it to 50%.

But with the percentage and the px, no such luck.

I see on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/calc that the divisor when dividing must be a number, not a unit length.

Is there a cunning trick to getting this working?

Thanks!

Solution

I've decided this isn't possible with CSS (I'd love to be proven wrong), so here's a quickly-hacked together JS solution. Only works on initial page load, but it'd be trivial to add user-resizing support to it if desired.

function getContentWidth (element) {
    var styles = getComputedStyle(element)

    return element.clientWidth
      - parseFloat(styles.paddingLeft)
      - parseFloat(styles.paddingRight)
}

const scale = getContentWidth(document.getElementById('banner').parentNode) / 728;

if (scale < 1) {
    document.getElementById('banner').style.transform = 'scale(' + scale + ')';
    document.getElementById('banner').style.transformOrigin = 'left';
}