gpt4 book ai didi

CSS - 如果窗口视口(viewport)变得太小,则按比例缩放元素

转载 作者:行者123 更新时间:2023-12-04 13:03:02 25 4
gpt4 key购买 nike

我有一个以屏幕为中心的元素,并希望它是固定大小的,除非它不适合窗口,然后它应该按比例缩小。不仅仅是宽度和高度,还有它的所有内容。所以transform: scale()内部 @media screen看起来不错的解决方案,但我不知道如何计算它的论点。我试图在 const 值上划分当前视口(viewport)高度,但没有用。

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

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

这是 JsFiddle

最佳答案

如果还有人来这里,我没有在 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 - 如果窗口视口(viewport)变得太小,则按比例缩放元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49954599/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com