Question

我是一个开发网站以支持IoT项目的新手，我有一个div我希望得到自动缩放脚本的支持，以防它不适合窗口（水平，垂直或两者兼而有之）），更具体地说，如果内容大于窗口。下面我将向您展示有问题的div的CSS。下面的代码是使div水平和垂直居中：

div.container 
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
    display: grid;
    padding: 0;
    font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
}

我正在寻找某种自动缩小功能，因为策略性地放置了子div，只是更改父div大小会分开放置。我将这个问题留在社区中，因为我使用的所有CSS和脚本都没有效果。我不知道它是否与浏览器有关，或者如果上面的CSS的某些行与我遇到的所提出的解决方案搞混了。理想情况下，我认为用一些javascript或jquery来解决扩展会更好，以防止CSS中出现更多混乱。但我对所有可能的解决方案持开放态度。先感谢您。

Answer 1

在此answer中读取如何在普通JS或jQuery中获取大小，然后在transform-scale或plain JS中读出如何使用jQuery你的div或{{3}}

不要忘记不要弄乱用户的缩放。

如果窗口不够大，则缩放（缩小）内容

1 个答案: