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);
}

Demo JsFiddle

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

1 个答案: