Question

我有一个元素，当悬停时可以使用transform缩放。这很好，但是如果我希望在各种浏览器/屏幕尺寸下都可以浏览该网站，将其缩放为静态数字不是很有用。现在的代码如下：

<!DOCTYPE html>
<html>
<head>
<script>
  {
  const w = window.innerWidth/200;
  const h = window.innerHeight/200;
  }
</script>
<style> 
.botright
    {
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  position: absolute;
  background: pink;
  transition: transform 500ms ease-in-out;
  transform-origin: left top;
  display: flex;
  align-items: center; 
  justify-content: center;
  font-family: sans-serif;
    }
  .botright:hover
     {
    transform: scaleX(w) scaleY(h);
    font-size: 0;
     }

值得注意的位在代码的顶部和底部（js和:hover）。我无法在CSS的其他任何地方使用在javascript中创建的w或h常量，并且js在:hover里面或周围都无法使用，所以我有点对于如何使元素扩展到相对于视图窗口的长度和宽度的大小感到困惑。

如果将元素本身缩放为窗口大小，则scale()中的静态数字将起作用，但这会导致其他一些问题，更重要的是，这不是我要执行的操作。

当前的功能版本确实使用了一个简单的数字来缩放元素，但是因为元素始终为100px x 100px（并且我有意使用像素是因为我总是希望元素在没有悬停时都为正方形），缩放只会使正方形更大。

我正在寻找一种缩放正方形的方法，以便将鼠标悬停在其上时，它将始终恰好到达可用窗口空间的边缘。

Answer 1

我认为您可以这样做：

.box {
  background: #05273D;
  border-radius: 5px;
  height: 100px;
  width: 100px;
  margin: 100px;
  transition: transform 1s;
}
.box:hover {
  transform: scale(2);
}

<div class='box'></div>

您可以从此处了解更多信息：https://www.w3schools.com/css/css3_2dtransforms.asp

Answer 2

您不能像这样将Javascript变量传递给style标记。一种解决方案是使用javascript创建style标签并连接计算出的值。

<script>
  const w = window.innerWidth/200;
  const h = window.innerHeight/200;
  var styleTag = document.createElement("style");
  styleTag.innerHTML = '.botright:hover { transform: scaleX(' + w + ') scaleY(' + h + '); font-size: 0; }';
  document.head.appendChild(styleTag);
</script>
<style>
.botright
{
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  position: absolute;
  background: pink;
  transition: transform 500ms ease-in-out;
  transform-origin: left top;
  display: flex;
  align-items: center; 
  justify-content: center;
  font-family: sans-serif;
}
</style>
<div class="botright">TEST</div>

但是请注意，这不会在调整窗口大小时更新。如果需要，可以将js代码放入绑定到窗口调整大小事件的函数中。但是，如果这样，您的函数应该给样式标签提供一个ID，并在存在之前将其删除（如果存在）。

根据窗口大小缩放转换

2 个答案: