CSS - 如果窗口视口变得太小，则按比例缩放元素

Question

我有一个位于屏幕中心的元素，并希望它具有固定大小，除非它不适合窗口，那么它应该按比例缩小。不仅仅是宽度和高度，还有所有内容。所以transform: scale()里面@media screen看起来像是一个很好的解决方案，但我不知道如何计算它的参数。我尝试将当前视口高度除以 const 值，但它不起作用。

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

最主要的是根据高度进行缩放，但如果可以根据高度和宽度进行智能缩放那就完美了。

这是JsFiddle

Answer 1

如果有人仍然到达这里，我没有仅在 css 中找到解决方案，而是使用 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);
}

演示 JsFiddle