CSS - Scale element proportionally if window viewport become too small

Question

I have an element centered on screen and wish it be fixed size unless it doesn't fit in window, then it should proportionally scale down. Not just width and height but all it's content. So transform: scale() inside of @media screen looks like good solution but I can't get how to calc it's argument. I tried to divide current viewport height on const value but it didn't work.

@media screen and (max-height: 300px) {
  #myform {
    transform: scale(calc(100vh / 300));
  }
}

The main thing is to scale it depending on height, but if it is possible to scale smart depending on height and width would be perfect.

Here is JsFiddle

Answer 1

If anyone still get here, I didn't find solution in css only but did a trick with css+js.

css:

:root {
    --trickyScale: 1;
}

#whereverYouNeed{
    transform: scale(var(--trickyScale));
}

js:

window.onresize = function() {
    let container = document.getElementById("whereverYouNeed");
    const minScale = 0.75;
    const maxScale = 1;
    let scale = Math.min(window.innerWidth / (container.offsetWidth + 8),
            window.innerHeight / (container.offsetHeight + 8));
    scale = Math.min(maxScale, Math.max(minScale, scale))
    document.documentElement.style.setProperty("--trickyScale", scale);
}

Demo JsFiddle